vue插件介绍
2. 插件分类
主要注册与绑定机制如下:
export default{
install(Vue,options){
Vue.myGlobalMethod= function(){ // 1. 添加全局方法或属性,如: vue-custom-element
// 逻辑...
}
Vue.directive('my-directive',{ // 2. 添加全局资源:指令/过滤器/过渡等,如
vue-touchbind(el,binding,vnode,oldVnode){
// 逻辑...
}
})
Vue.mixin({ created:function(){ // 3. 通过全局 mixin方法添加一些组件选项,如: vuex
// 逻辑...}...
})
Vue.prototype.$myMethod=function(options){// 4. 添加实例方法,通过把它们添加到 Vue.prototype 上实现
// 逻辑...}}
}
3. 插件使用
在plugins.js中我们仅仅编写了一个插件的空壳子,假如现在需要全局注册该插件,我们可以在入口文件,比如main.js中注册:
...
import Vue from'vue'
import MyPlugin from './plugins/plugins.js'
Vue.use(MyPlugin);
...
通过全局方法 Vue.use() 即可使用该插件,其自动会调用install方法。Vue.use会自动阻止注册相同插件多次,届时只会注册一次该插件。