Vue2自定義外掛的寫法-Vue.use()

雲冬發表於2022-06-24
Vue

    最近在用vue2完善一個專案，順便溫習下vue2的基礎知識點！

有些知識點恰好沒用到時間一長就會淡忘，這樣對自己是一種損失。

　定義一個物件 物件裡可以有任何內容 但install的函式是必不可少的，因為 use方法會去呼叫target.install();

　　值得一提的是這裡呼叫install的時候會向這個函式傳入Vue例項（剛出生的時候，或者叫 beforeCreate鉤子時期的例項），這就給了我們很多的操作空間！

　　我們知道不管是搞全域性事件匯流排還是怎樣都是往Vue原型上掛方法，這裡就可以利用它來封裝屬於自己的Vue外掛；

　Vue.use()其實還有第二個引數，可以是一個物件,可以傳入自己diy的內容，讓Vue變得更加華麗！、

　　下邊看我寫的示例吧；

myplgins.js

------------------

import axios from "@/utils/network";
const myPlugins = {};
myPlugins.install = function (Vue, {a, b, c}) {
    Vue.config.productionTip = false;
    Vue.config.devtools = true
    Vue.prototype.$bus=Vue //將一個全新的vue例項當作一個共有物件 全域性事件匯流排
    Vue.prototype.axios=axios
}
export default myPlugins

main.js

---------------------


import myPlugins from '@/utils/testPlugins'

Vue.use(myPlugins, {a: 1, b: 2, c: 3})

 

相關文章