Vue 插件编写

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会自动阻止注册相同插件多次，届时只会注册一次该插件。