Vue插件如何使用

這篇文章主要介紹了Vue插件如何使用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

Vue插件

1、概述

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

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

2、使用方法

總體流程應該是：

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

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

聲明插件

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

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

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

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

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

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

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

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

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

注冊插件

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

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

//main.js
import Vue from 'vue'
import App from './App.vue'

//關鍵是這兩行
import service from './service.js'
Vue.use(service)

new Vue({
  el: '#app',
  render: (h) => h(App)
})

如代碼中注釋所說，關鍵是通過import導入service文件，然后在創建根組件之前，讓Vue對象通過use方法來注冊插件service。

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

3、寫插件、使用插件

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

//以下內容都是添加到上面install的函數里面的

// 1. 添加全局方法或屬性
Vue.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【添加實例方法或屬性】

1、核心思想：

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

2、寫：

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

3、用：

假設有這樣一個組件：

<template>
  <div>
    {{num}}
    <button @click="double">點擊后讓左邊的數字翻倍</button>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        num: 1
      }
    },
    methods: {
      double: function () {
        //這里的this.doubleNumber()方法就是上面寫的組件里的方法
        this.num = this.doubleNumber(this.num);
      }
    }
  }
</script>

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

4、假如添加的是屬性：

例如：

Vue.prototype.number = 1;

會發生什么事情呢？

1、不管是【按值傳遞類型】還是【按引用傳遞類型】，該變量都不會被不同組件所共享，更準確的說，假如有A、B兩個組件。A組件里的number數值改變，B組件里的number數值是不會跟著改變的。因此不要想著引用這樣一個變量，然后修改了A中的值，B里也自動跟著改變了；

2、當組件里沒有該屬性時，調用時，顯示的是通過插件獲取的值；

當組件里有該屬性時，調用時，顯示的是組件里該屬性的值；

由此而推，函數也是這樣的，組件里的同名函數總是會覆蓋插件提供的函數。

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

3.2【添加全局方法或屬性】

1、核心思想：

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

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

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

通過3.1添加，是在組件里，通過this.test()來調用

通過3.2添加，是在外面，通過Vue實例，如Vue.test()來調用

2、寫：

//放在哪里參考上面
Vue.test = function () {
  alert("123")
}

3、用：

//注意先導入Vue對象才能使用
Vue.test()

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

4、其他：

別問我如果和Vue本身屬性同名會發生什么事情，我沒試過=.=

3.3【注入組件】

1、核心思想：

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

2、寫：

例如：

Vue.mixin({
  created: function () {
    console.log("組件開始加載")
  }
})

然后這里的代碼會在每個組件（包括根組件）的created執行之前執行。

可以自行在每個組件的created方法里寫一段console.log來查看測試

可以和【實例屬性】配合使用，用于調試或者控制某些功能

// 注入組件
Vue.mixin({
  created: function () {
    if (this.NOTICE)
      console.log("組件開始加載")
  }
})
// 添加注入組件時，是否利用console.log來通知的判斷條件
Vue.prototype.NOTICE = false;

【注入給非Vue實例本身就有的方法】：

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

Vue.mixin({
  methods: {
    test: function () {
      console.log("mixin test");
    }
  }
})

那么，組件里若本身有test方法，并 不會 先執行插件的test方法，再執行組件的test方法。

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

3、用：

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

4、其他：

1、如果同時有多個插件注入一個方法（例如created，那么會先執行先注入的那個方法，再依次執行后注入的，最后執行組件本身的）

2、注意，像methods屬性下的方法，并不會在組件注入后每個都執行，而是只執行一個，并且優先執行組件本身的。

3.4【添加全局資源】

1、核心思想：

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

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

2、寫：

例如：

//時間格式化過濾器，輸入內容是number或者Date對象，輸出是YYYY-MM-DD HH-MM-SS
Vue.filter('formatTime', function (value) {
  Date.prototype.Format = function (fmt) { //author: meizz
    var o = {
      "M+": this.getMonth() + 1, //月份
      "d+": this.getDate(), //日
      "h+": this.getHours(), //小時
      "m+": this.getMinutes(), //分
      "s+": this.getSeconds(), //秒
      "q+": Math.floor((this.getMonth() + 3) / 3), //季度
      "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt))
      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
      if (new RegExp("(" + k + ")").test(fmt))
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
  }
  return new Date(value).Format("yyyy-MM-dd hh:mm:ss");
})

3、用：

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

{{num|formatTime}}

4、其他：

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

4、示例demo

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

/* 說明：
 * 插件demo，供學習使用
 * 本頁面用于提供各種處理服務
 * 作者：王冬  QQ：20004604
 * */
export default {
  install: function (Vue, options) {
    // 1. 添加全局方法或屬性
    // 略

    // 2. 添加全局資源
    // 時間格式化過濾器，輸入內容是number或者Date對象，輸出是YYYY-MM-DD HH-MM-SS
    Vue.filter('formatTime', function (value) {
      Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
          "M+": this.getMonth() + 1, //月份
          "d+": this.getDate(), //日
          "h+": this.getHours(), //小時
          "m+": this.getMinutes(), //分
          "s+": this.getSeconds(), //秒
          "q+": Math.floor((this.getMonth() + 3) / 3), //季度
          "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt))
          fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
          if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
      }
      return new Date(value).Format("yyyy-MM-dd hh:mm:ss");
    })

    // 2. 添加全局資源
    // 添加注入組件時，是否利用console.log來通知的判斷條件，也是組件實例屬性
    Vue.prototype.NOTICE = true;


    // 3. 注入組件
    // 注入組件，插件加載開始前提示
    Vue.mixin({
      created: function () {
        if (this.NOTICE)
          console.log("組件開始加載")
      },
      methods: {
        test: function () {
          console.log("mixin test");
        }
      }
    })


    // 4. 添加實例方法
    // 返回數字是輸入數字的兩倍，如果不是數字或者不能隱式轉換為數字，則輸出null
    // 組件實例方法
    Vue.prototype.doubleNumber = function (val) {
      if (typeof val === 'number') {
        return val * 2;
      } else if (!isNaN(Number(val))) {
        return Number(val) * 2;
      } else {
        return null
      }
    }

    // 4. 添加實例方法
    // 服務組，將實例方法整合到$service中，避免命名沖突
    Vue.prototype.$service = {
      //電話號碼合法性檢查
      telNumberCheck: function (tel) {
        var pattern = /(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;
        return pattern.test(tel)
      }
    }
  }
};

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Vue插件如何使用”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!