Руководство

Плагины

Плагины позволяют добавить во Vue некоторую глобальную функциональность. Область применения плагинов явно не определена. Можно разделить плагины на нескольких типов:

  1. Добавляют глобальные методы и/или свойства, например vue-custom-element

  2. Добавляют глобальные объекты: директивы/фильтры/переходы и т.д., например vue-touch

  3. Добавляют опции компонентам через глобальную примесь, например vue-router

  4. Добавляют методы экземпляра Vue через Vue.prototype.

  5. Библиотеки, предоставляющие собственные API и комбинирующие вышеперечисленные возможности, например vue-router

Использование плагинов

Для использования плагина необходимо вызвать глобальный метод Vue.use(). Его нужно вызывать перед new Vue():

// вызывает `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
  //... настройки
})

Можно передавать дополнительные параметры в плагин:

Vue.use(MyPlugin, { someOption: true })

Vue.use автоматически предотвращает многократную регистрацию плагина. Несколько вызовов Vue.use для одного плагина установит его лишь один раз.

Некоторые официальные плагины Vue.js, такие как vue-router, автоматически вызывают Vue.use(), если обнаружат глобальную переменную Vue. Однако при использовании инструментов модульного окружения, например CommonJS, необходимо всегда вызывать Vue.use() явно:

// При использовании CommonJS посредством Browserify или Webpack
var Vue = require('vue')
var VueRouter = require('vue-router')

// Не забудьте этот вызов!
Vue.use(VueRouter)

Обратите внимание на awesome-vue — огромную коллекцию плагинов и библиотек от сообщества Vue.

Создание плагина

Плагин Vue.js должен содержать метод install. Этот метод будет вызываться с конструктором Vue в качестве первого аргумента, и с дополнительными опциями плагина в качестве второго (если передавались):

MyPlugin.install = function (Vue, options) {
  // 1. добавление глобального метода или свойства
  Vue.myGlobalMethod = function () {
    // некоторая логика ...
  }

  // 2. добавление глобального объекта
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // некоторая логика ...
    }
    ...
  })

  // 3. добавление опций компонентов
  Vue.mixin({
    created: function () {
      // некоторая логика ...
    }
    ...
  })

  // 4. добавление метода экземпляра
  Vue.prototype.$myMethod = function (methodOptions) {
    // некоторая логика ...
  }
}
← Render-функции и JSX Фильтры →
Обнаружили ошибку или хотите добавить что-то своё в документацию? Отредактируйте эту страницу на GitHub!