開發vue全局插件的4種方式

定義全局插件的步驟

1.定義全局插件 pluginsUtil.js
Vue.js 的插件應當有一個公開方法 install 。這個方法的第一個參數是 Vue 構造器，第二個參數是一個可選的選項對象：

export default {
    install (Vue, options) {
        // 具體4種方式，寫在此處
    }
}

2.main.js裏引入並使用

import pluginsUtil from './pluginsUtil'
Vue.use(pluginsUtil)

3.組件內調用

vue全局插件的4種方式

請謹慎使用全局混入，由於它會影響每一個單首創建的 Vue 實例 (包括第三方組件)。
推薦使用：模塊化的導出、導入

1.Vue.mixin 方式
註冊全局混合對象

Vue.mixin({
            data () {
                return {
                    someValue1: 'some value1：mixin的data裏的值'
                }
            }
        })

2.Vue.prototype 方式
定義 Vue 原型上的屬性

Vue.prototype.someValue2 = 'someValue2：Vue.prototype上的值'
        Vue.prototype.getDate = function () {
            let dateNew = new Date()
            return dateNew
        }

3.Vue.filter 方式
定義全局過濾器

Vue.filter('vcntFormat', function (cnt) {
            return cnt >= 100000 ? Math.floor(cnt / 10000) + '萬' : cnt
        })

4.Vue.directive 方式
定義全局自定義指令

Vue.directive('myfocus', {
            // 當綁定元素插入到 DOM 中。
            inserted: function (el) {
                // 聚焦元素
                el.focus()
            }
        })

• 詳細代碼見github倉庫：https://github.com/cag2050/vu...