开发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()
            }
        })
    原文作者:cag2050
    原文地址: https://segmentfault.com/a/1190000011789200
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞