vue添加插件

vue插件

概述

插件一般會爲 Vue 添加全局功能。

使用方法

整體流程： 聲明插件-寫插件-註冊插件-使用插件

聲明插件

先寫一個js文件，基本內容以下:

export default {
    install(Vue, options) {
        // 添加的內容寫在這個函數裏面
        //具體內容往下看
    }
}

Vue插件應有一個公開方法:install，這個方法的第一參數是Vue構造器，第二個參數是可選的選項對象。

寫插件

按照官方文檔，寫插件有四種方法，

// 1. 添加全局方法或屬性
  Vue.myGlobalMethod = function () {
    // 邏輯...
  }
// 2. 添加全局資源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 邏輯...
    }
    ...
  })
 // 3. 注入組件
  Vue.mixin({
    created: function () {
      // 邏輯...
    }
    ...
  })
 // 4. 添加實例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 邏輯...
  }

在此使用最經常使用的第4種:添加實例方法，代碼以下:

//讓輸出的數字翻倍，若是不是數字或者不能隱式轉換爲數字，則輸出null

export default {
    install(Vue, options) {
        Vue.prototype.doubleNum = function(num) {
            if (typeof num === 'number' && !isNaN(Number(num))) {
                return num * 2;
            } else {
                return null;
            }
        }
    }
}

註冊插件

//main.js
import Vue from 'vue'
import service from './service.js'
Vue.use(service)

關鍵: 引入後使用Vue.use()來註冊插件

使用插件

在一個組件中:

<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>

原文:http://blog.csdn.net/qq200046...