Vue插件

1、概述

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

比如說，讓你在每個單頁面的組件里，都可以調(diào)用某個方法，或者共享使用某個變量，或者在某個方法之前執(zhí)行一段代碼等

2、使用方法

總體流程應(yīng)該是：

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

寫插件和聲明插件是同步的，然后注冊到Vue對象中（不用擔心重復(fù)注冊），最后在寫Vue組件的時候使用寫的插件

聲明插件

先寫一個js文件，這個js文件就是插件文件，里面的基本內(nèi)容如下：

/*  說明： *  插件文件：service.js *  作者：王冬  QQ：20004604 * */export default {  install: function (Vue, options) {    // 添加的內(nèi)容寫在這個函數(shù)里面  }};

其中install的第一個參數(shù)Vue表示的是Vue的實例，第二個參數(shù)表示的是一些設(shè)置選項。

Vue實例好理解，就是Vue對象。

而options設(shè)置選項就是指，在調(diào)用這個插件時，可以傳一個對象。

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

假如options.float為true時，輸出浮點數(shù)；

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

具體怎么添加，之后再說。

注冊插件

如果使用過Vue-router，就很好理解，通過import引入后，然后通過 Vue.use(插件名) 注冊插件；

例如，我們通常在main.js里引入各種東西，并且組件的根實例也在這里

//main.jsimport Vue from 'vue'import App from './App.vue'//關(guān)鍵是這兩行import service from './service.js'Vue.use(service)new Vue({  el: '#app',  render: (h) => h(App)})

如代碼中注釋所說，關(guān)鍵是通過import導(dǎo)入service文件，然后在創(chuàng)建根組件之前，讓Vue對象通過use方法來注冊插件service。

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

3、寫插件、使用插件

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

//以下內(nèi)容都是添加到上面install的函數(shù)里面的// 1. 添加全局方法或?qū)傩訴ue.myGlobalMethod = function () {  // 邏輯...}// 2. 添加全局資源Vue.directive('my-directive', {  bind (el, binding, vnode, oldVnode) {    // 邏輯...  }  ...})// 3. 注入組件Vue.mixin({  created: function () {    // 邏輯...  }  ...})// 4. 添加實例方法Vue.prototype.$myMethod = function (options) {  // 邏輯...}

先給出最常用的：【4. 添加實例方法】的寫法和使用方法

3.1【添加實例方法或?qū)傩浴?/p>

1、核心思想：

通過prototype來添加方法和屬性。

2、寫：

//讓輸出的數(shù)字翻倍，如果不是數(shù)字或者不能隱式轉(zhuǎn)換為數(shù)字，則輸出nullVue.prototype.doubleNumber = function (val) {  if (typeof val === 'number') {    return val * 2;  } else if (!isNaN(Number(val))) {    return Number(val) * 2;  } else {    return null  }}