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

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

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

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

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

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

接下來我們聊聊插件里可以做那些事情，這部分才是重點。

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

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

然后我們在main.js文件中使用一下這個全局方法

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

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

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

在組件中使用自定義指令

"shopList"></digui>

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

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

結果如圖所示：4、在自定義插件件里面定義一些實例方法

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

這樣我們便可在項目中通過this的形式直接調用實例方法。我們在about頁面的created生命周期中調用一下這個實例方法

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

結果如下圖所示：

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({
????//?注入到每個組件的?created?生命周期中
????created()?{
??????console.log("created?in?plugin")
????},
??})

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

export?default?myPlguin;

那么我們在Vue項目中使用第三方插件時，就通過Vue.use()來掛載，如ElementUI，但是axios就不需要，這是為什么呢？因為axios沒有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 首先判斷這個插件是否被注冊過，不允許重復注冊，并且接收的 plugin 參數(shù)的限制是 Function | Object 兩種類型。對于這兩種類型有不同的處理。首先將我們傳入的參數(shù)整理成數(shù)組：const args = toArray(arguments, 1)；再將 Vue 對象添加到這個數(shù)組的起始位置 args.unshift(this) ,這里的 this 指向 Vue 對象；如果我們傳入的 plugin(Vue.use的第一個參數(shù)) 的 install 是一個方法。也就是說如果我們傳入一個對象，對象中包含 install 方法，那么我們就調用這個 plugin 的 install 方法并將整理好的數(shù)組當成參數(shù)傳入 install 方法中， plugin.install.apply(plugin, args)；如果我們傳入的 plugin 就是一個函數(shù),那么我們就直接調用這個函數(shù)并將整理好的數(shù)組當成參數(shù)傳入， plugin.apply(null, args)；之后給這個插件添加至已經(jīng)添加過的插件數(shù)組中，標示已經(jīng)注冊過installedPlugins.push(plugin)；最后返回 Vue 對象。

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

export?const?Plugin?=?{
????install(Vue)?{
????????Vue.component...
????????Vue.mixins...
????????Vue...
????????//?我們也可以在install里面執(zhí)行其他函數(shù)，Vue會將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????
}
//?我們可以在這個對象上添加參數(shù)，最終Vue只會執(zhí)行install方法，而其他方法可以作為封裝install方法的輔助函數(shù)

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

總結

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

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