Создание плагина
Плагины обычно добавляют во Vue некоторой глобальной функциональностью. В явном виде область применения плагинов не определена. Вы можете создавать плагины нескольких различных типов:
- Добавляющие глобальные методы и/или свойства, например vue-custom-element
- Добавляющие глобальные объекты: директивы/фильтры/переходы и т.д., например vue-touch
- Добавляющие опции компонентов посредством глобальной примеси, например vue-router
- Добавляющие методы экземпляра Vue через Vue.prototype.
- Библиотеки, предоставляющие собственные API, комбинируя вышеперечисленные возможности, например Vue-router
Плагин 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) {
// некоторая логика ...
}
}
Использование плагинов
Для использования плагина нужно вызвать глобальный метод Vue.use():
// вызывает `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
При установке плагина можно передать дополнительные параметры:
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.
0 комментариев