開發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種方式

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()
            }
        })
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容