Vue 自定義外掛程式及使用

2021-09-19 05:22:31 字數 1199 閱讀 5044

外掛程式通常會為 vue 新增全域性功能。

所謂全域性:

即不需要像元件那樣,每次使用他前都需要先引入一次。對於外掛程式只要在最開始引入一次,在任何元件就可以直接使用。(類似於我們在window上新增的方法屬性那樣,任何地方都可以用)

外掛程式能實現的功能沒有限制,不過常見下面幾種:

通過外掛程式,新增全域性方法或者屬性

通過外掛程式,新增全域性資源:指令/過濾器/過渡等

通過外掛程式(使用全域性 mixin 方法),新增一些元件選項

通過外掛程式,新增 vue 例項方法,通過把它們新增到 vue.prototype 上實現。

乙個庫,提供自己的 api,同時提供上面提到的乙個或多個功能,如 vue-router

所謂vue外掛程式其實就是乙個簡單的js物件而已,然後這個外掛程式物件有乙個公開屬性 install ,他的值為乙個函式,此函式接受兩個引數。第乙個引數是 vue 構造器 , 第二個引數是乙個可選的選項物件。

最會匯出此外掛程式物件以供別人使用,如下所示

//所謂vue的外掛程式,就是乙個js物件

let myplugin=

}export

default myplugin;

1、編寫外掛程式

//所謂vue的外掛程式,就是乙個js物件

let myplugin=

// 新增全域性混入

vue.

mixin(,

})// 新增全域性指令

vue.

directive

('dir',}

)}}export

default myplugin;

2、使用

使用外掛程式的時候,在入口檔案import引入,再使用use()方法使用即可

3、在子元件中訪問

自定義Vue外掛程式

在vue專案中,需要用到公共的方法時,可以將這些方法寫在外掛程式裡。在外掛程式裡可以自己定義全域性的變數,過濾器 指令 例項上的方法等。使用外掛程式可以為vue新增全域性功能,包括全域性方法或屬性 全域性資源 指令 過濾器 過渡等 通過全域性mixin方法新增一些元件選項 新增例項方法 新增庫 目前...

自定義Vue外掛程式

今天咱們來玩一下vue中的自定義元件,此案例直接通過script引入js的形式定義元件 我是簡單的寫了乙個彈出框的小外掛程式 css樣式 這就不需要解釋了吧,強擼 html結構 元件核心js var alert 此處的install方法 是vue中規定好的 alert.install functio...

vue 自定義外掛程式

最近要在乾坤袋裡面加開發三個全域性元件,所以來學習下這部分的知識 一 外掛程式和元件的區別 元件 是對 某功能 或者 某模組 的封裝 比如 loading toast 等 外掛程式 是對一系列元件的封裝 比如 vuex vue router 外掛程式裡面可以有很多元件 外掛程式與元件的關係 外掛程式...