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