vueプラグインの追加

1931 ワード

vueプラグイン
概要
プラグインは通常、Vueにグローバル機能を追加します.
使用方法
全般的なプロセス:宣言プラグイン-書き込みプラグイン-登録プラグイン-プラグインの使用
プラグインの宣言
まずjsファイルを書きます.基本的な内容は以下の通りです.
export default {
    install(Vue, options) {
        //              
        //       
    }
}

Vueプラグインには、installという公開方法があります.この方法の第1のパラメータはVueコンストラクタであり、第2のパラメータはオプションのオプションオブジェクトです.
書き込みプラグイン
公式ドキュメントに従って、プラグインを書くには4つの方法があります.
// 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()はプラグインを登録します
プラグインの使用
1つのコンポーネントで:


    export default{
        data(){
            return {
                num: 1
            }
        },
        methods: {
            double: function () {
                //   this.doubleNumber()              
                this.num = this.doubleNumber(this.num);
            }
        }
    }

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