vue插件介紹

2. 插件分類 ??

插件類型

主要注冊(cè)與綁定機(jī)制如下:

? ??export default{
????????install(Vue,options){
????????????????Vue.myGlobalMethod= function(){ ?????????????????????// 1. 添加全局方法或?qū)傩裕? vue-custom-element
????????????????????????????????// 邏輯...
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ?Vue.directive('my-directive',{ ? ? ? ? ? ?????????????????????// 2. 添加全局資源：指令/過(guò)濾器/過(guò)渡等，如
? ? ? ? ? ? ? ? ? ? ? ? ?????vue-touchbind(el,binding,vnode,oldVnode){
? ? ? ? ? ? ? ? ? ? ? ? ? ????? // 邏輯...
????????????????????????????}
? ? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ? ?Vue.mixin({ ?created:function(){ ? ? ? ? ? ? ? ? ? ? ? ? ? // 3. 通過(guò)全局 mixin方法添加一些組件選項(xiàng)，如: vuex
????????????????????????????????// 邏輯...}...
????????????????????})
? ? ? ? ? ? ? ? ? Vue.prototype.$myMethod=function(options){// 4. 添加實(shí)例方法，通過(guò)把它們添加到 Vue.prototype 上實(shí)現(xiàn)
????????????????????????????????// 邏輯...}}
? ? ? ? ? ? ? ? ? ? }

3. 插件使用

????在plugins.js中我們僅僅編寫(xiě)了一個(gè)插件的空殼子，假如現(xiàn)在需要全局注冊(cè)該插件，我們可以在入口文件，比如main.js中注冊(cè)：

...
import Vue from'vue'
import MyPlugin from './plugins/plugins.js'
Vue.use(MyPlugin);
...

通過(guò)全局方法 Vue.use() 即可使用該插件，其自動(dòng)會(huì)調(diào)用install方法。Vue.use會(huì)自動(dòng)阻止注冊(cè)相同插件多次，屆時(shí)只會(huì)注冊(cè)一次該插件。