Vue中如何使用自定義插件(plugin)

1、在根目錄src下創(chuàng)建一個(gè)libs文件夾，在libs文件夾下面創(chuàng)建一個(gè)myPlugins文件夾，用來(lái)存放我們的自定義插件，在myPlugins文件夾下面再創(chuàng)建一個(gè)index.js的文件。在index.js文件里面，我們創(chuàng)建一個(gè)myPlguin的對(duì)象，然后導(dǎo)出，最后在main.js中導(dǎo)入并且通過 use() 的方式使用即可，一個(gè)自定義插件便完成了，就是這么簡(jiǎn)單，好了，感謝大家的閱讀。其余的事情就是在myPlugins/index.js文件里填充我們插件的功能代碼了。

2、在libs/myPlugins/index.js文件里創(chuàng)建myPlguin對(duì)象并導(dǎo)出，給myPlguin對(duì)象添加一個(gè)install的方法，install方法的第一個(gè)參數(shù)是Vue實(shí)例，第二個(gè)是我們的配置項(xiàng) options

const?myPlguin?=?{};
myPlguin.install?=?function?(Vue,?options)?{}
export?default?myPlguin;

3、接下來(lái)就是在main.js文件里引入，并使用 Vue.use()方法使用。

//?導(dǎo)入并使用我們的自定義插件
import?myPLugin?from?'./libs/myPlugin';
Vue.use(myPLugin);

接下來(lái)我們聊聊插件里可以做那些事情，這部分才是重點(diǎn)。

1、在自定義插件里面定義我們的全局方法

//?自定義組件里面定義的全局方法
Vue.myGlobalMethod?=?function?()?{
??console.log('自定義組件里面定義的全局方法');
}

然后我們?cè)趍ain.js文件中使用一下這個(gè)全局方法

//?導(dǎo)入并使用我們的自定義插件
import?myPLugin?from?'./libs/myPlugin';
Vue.use(myPLugin);
//?使用自定義插件里面的全局方法
Vue.myGlobalMethod();

結(jié)果如下圖所示：2、在自定義插件里面定義我們的全局自定義指令、過濾器以及全局組件

//?自定義組件里面定義的全局自定義指令
Vue.directive('my-directive',?{
??bind()?{
????console.log('自定義組件里面的自定義指令綁定成功');
??}
});

在組件中使用自定義指令

"shopList"></digui>

結(jié)果如下圖所示：3、在自定義插件件里面加入全局混入

Vue.mixin({
????//?注入到每個(gè)組件的?created?生命周期中
??created()?{
????console.log("created?in?plugin")
??},
})

結(jié)果如圖所示：4、在自定義插件件里面定義一些實(shí)例方法

Vue.prototype.$myMethod?=?function(){
??console.log("自定義組件里面定義的實(shí)例方法");
}

這樣我們便可在項(xiàng)目中通過this的形式直接調(diào)用實(shí)例方法。我們?cè)赼bout頁(yè)面的created生命周期中調(diào)用一下這個(gè)實(shí)例方法

created()?{
??this.$myMethod();
},

結(jié)果如下圖所示：

libs/myPlugin/index.js完整代碼：

const?myPlguin?=?{};

myPlguin.install?=?function?(Vue,?options)?{
??//?自定義組件里面定義的全局方法
??Vue.myGlobalMethod?=?function?()?{
????console.log('自定義組件里面定義的全局方法');
??}
??//?自定義組件里面定義的全局自定義指令
??Vue.directive('my-directive',?{
????bind()?{
??????console.log('自定義組件里面的自定義指令綁定成功');
????}
??});
??//?也可以加入全局的過濾器、全局組件

??//?加入全局混入
??Vue.mixin({
????//?注入到每個(gè)組件的?created?生命周期中
????created()?{
??????console.log("created?in?plugin")
????},
??})

??//?//?定義一些實(shí)例方法
??Vue.prototype.$myMethod?=?function(){
????console.log("自定義組件里面定義的實(shí)例方法");
??}
}

export?default?myPlguin;

那么我們?cè)赩ue項(xiàng)目中使用第三方插件時(shí)，就通過Vue.use()來(lái)掛載，如ElementUI，但是axios就不需要，這是為什么呢？因?yàn)閍xios沒有install方法。

//?引入ElementUI
import?ElementUI?from?'element-ui';
import?'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

看看源碼

toArray 源碼

export?function?toArray?(list:?any,?start?:?number):?Array<any>?{
??start?=?start?||?0
??let?i?=?list.length?-?start
??const?ret:?Array?=?new?Array(i)while?(i--)?{
????ret[i]?=?list[i?+?start]
??}return?ret
}

import?{?toArray?}?from?'../util/index'

export?function?initUse?(Vue:?GlobalAPI)?{
??Vue.use?=?function?(plugin:?Function?|?Object)?{
????const?installedPlugins?=?(this._installedPlugins?||?(this._installedPlugins?=?[]))
????if?(installedPlugins.indexOf(plugin)?>?-1)?{
??????return?this
????}

????//?additional?parameters
????const?args?=?toArray(arguments,?1)
????args.unshift(this)
????if?(typeof?plugin.install?===?'function')?{
??????plugin.install.apply(plugin,?args)
????}?else?if?(typeof?plugin?===?'function')?{
??????plugin.apply(null,?args)
????}
????installedPlugins.push(plugin)
????return?this
??}
}

從源碼中我們可以發(fā)現(xiàn) vue 首先判斷這個(gè)插件是否被注冊(cè)過，不允許重復(fù)注冊(cè)，并且接收的 plugin 參數(shù)的限制是 Function | Object 兩種類型。對(duì)于這兩種類型有不同的處理。首先將我們傳入的參數(shù)整理成數(shù)組：const args = toArray(arguments, 1)；再將 Vue 對(duì)象添加到這個(gè)數(shù)組的起始位置 args.unshift(this) ,這里的 this 指向 Vue 對(duì)象；如果我們傳入的 plugin(Vue.use的第一個(gè)參數(shù)) 的 install 是一個(gè)方法。也就是說(shuō)如果我們傳入一個(gè)對(duì)象，對(duì)象中包含 install 方法，那么我們就調(diào)用這個(gè) plugin 的 install 方法并將整理好的數(shù)組當(dāng)成參數(shù)傳入 install 方法中， plugin.install.apply(plugin, args)；如果我們傳入的 plugin 就是一個(gè)函數(shù),那么我們就直接調(diào)用這個(gè)函數(shù)并將整理好的數(shù)組當(dāng)成參數(shù)傳入， plugin.apply(null, args)；之后給這個(gè)插件添加至已經(jīng)添加過的插件數(shù)組中，標(biāo)示已經(jīng)注冊(cè)過installedPlugins.push(plugin)；最后返回 Vue 對(duì)象。

通過以上分析我們可以知道，在我們以后編寫插件的時(shí)候可以有兩種方式。一種是將這個(gè)插件的邏輯封裝成一個(gè)對(duì)象，最后將在 install 編寫業(yè)務(wù)代碼暴露給 Vue 對(duì)象。這樣做的好處是可以添加任意參數(shù)在這個(gè)對(duì)象上方便將 install 函數(shù)封裝得更加精簡(jiǎn)，可拓展性也比較高。還有一種則是將所有邏輯都編寫成一個(gè)函數(shù)暴露給 Vue。其實(shí)兩種方法原理都一樣，無(wú)非第二種就是將這個(gè)插件直接當(dāng)成 install 函數(shù)來(lái)處理。個(gè)人覺得第一種方式比較合理。

export?const?Plugin?=?{
????install(Vue)?{
????????Vue.component...
????????Vue.mixins...
????????Vue...
????????//?我們也可以在install里面執(zhí)行其他函數(shù)，Vue會(huì)將this指向我們的插件
????????console.log(this)??//?{install:?...,utils:?...}
????????this.utils(Vue)????//?執(zhí)行utils函數(shù)
????????console.log(this.COUNT)?//?0
????},
????utils(Vue)?{
????????Vue...
????????console.log(Vue)??//?Vue
????},
????COUNT:?0????
}
//?我們可以在這個(gè)對(duì)象上添加參數(shù)，最終Vue只會(huì)執(zhí)行install方法，而其他方法可以作為封裝install方法的輔助函數(shù)

const?test?=?'test'
export?function?Plugin2(Vue)?{
????Vue...
????console.log(test)??//?'test'
????//?注意如果插件編寫成函數(shù)形式，那么Vue只會(huì)把this指向null，并不會(huì)指向這個(gè)函數(shù)
????console.log(this)??//?null
}
//?這種方式我們只能在一個(gè)函數(shù)中編寫插件邏輯，可封裝性就不是那么強(qiáng)了

總結(jié)

以上是生活随笔為你收集整理的vue里面_Vue中如何使用自定义插件（plugin）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。