Vue插件寫、用詳解（附demo）

簡單來說，插件就是指對vue的功能的增強或補充。

比如說，讓你在每個單頁面的元件裡，都可以調用某個方法，或者共享使用某個變量，或者在某個方法之前執行一段代碼等

總體流程應該是：

【聲明插件】——【寫插件】——【注冊插件】——【使用插件】

寫插件和聲明插件是同步的，然後注冊到vue對象中（不用擔心重複注冊），最後在寫vue元件的時候使用寫的插件

先寫一個js檔案，這個js檔案就是插件檔案，裡面的基本内容如下：

其中install的第一個參數vue表示的是vue的執行個體，第二個參數表示的是一些設定選項。

vue執行個體好了解，就是vue對象。

而options設定選項就是指，在調用這個插件時，可以傳一個對象。

例如這個對象有一個屬性float，然後在寫插件的一個方法/變量時，我需要輸出一個數字，然後寫一個if判斷語句，

假如options.float為true時，輸出浮點數；

假如為false或undefined（即沒傳參）時，輸出為整數。

具體怎麼添加，之後再說。

如果使用過vue-router，就很好了解，通過import引入後，然後通過 <code>vue.use(插件名)</code> 注冊插件；

例如，我們通常在main.js裡引入各種東西，并且元件的根執行個體也在這裡

如代碼中注釋所說，關鍵是通過import導入service檔案，然後在建立根元件之前，讓vue對象通過use方法來注冊插件service。

通過這樣簡單的兩步，就可以使用插件了。

按照官方文檔，寫插件有四種方法，先給出官方的代碼：

先給出最常用的：【4. 添加執行個體方法】的寫法和使用方法

1、核心思想：

2、寫：

3、用：

假設有這樣一個元件：

我們便可以通過點選button按鈕，讓num的值，在每次點選都翻倍了。

4、假如添加的是屬性：

例如：

會發生什麼事情呢？

也就是說，當插件提供一個屬性時，元件裡沒這個屬性，就用插件的屬性；元件有，就用元件自己的。

就是給vue對象添加一個屬性。

初次接觸很容易和上面3.1弄混，實際上，3.1是給元件裡使用的，而3.2是給vue對象使用的。

例如，假如添加一個方法test()，那麼：

使用時會執行對應的方法，比如這裡就是alert彈窗

4、其他：

别問我如果和vue本身屬性同名會發生什麼事情，我沒試過=.=

就像寫vue元件時，那樣寫，方法名保持一緻，其會在執行元件對應的方法名之前執行。

然後這裡的代碼會在每個元件（包括根元件）的created執行之前執行。

可以自行在每個元件的created方法裡寫一段console.log來檢視測試

可以和【執行個體屬性】配合使用，用于調試或者控制某些功能

【注入給非vue執行個體本身就有的方法】：

假如是寫給例如methods屬性的某個方法，例如以下注入：

那麼，元件裡若本身有test方法，并 不會 先執行插件的test方法，再執行元件的test方法。

而是隻執行其中一個，并且優先執行元件本身的同名方法。這點需要注意

不需要手動調用，在執行對應的方法時會被自動調用的（并且先調用插件裡的，再調用元件本身的）

添加方法和正常添加方法類似，甚至幾乎一樣。

可以添加【自定義指令】、【過濾器】、【過渡等】，這裡以【過濾器】為例

和正常使用一樣用就行了，so easy。例如：

可以用這個找各種有意思的功能，作為插件寫好，然後需要的地方導入就行，超級友善！

附一個有簡單功能的示例demo，提供參考使用