vue全局组件全局插件开发技巧

很多时候我们开发一个组件需要频繁使用的时候，最好的方法就是进行全局注册，这样可以更方便使用。

这篇文章就是讨论一下全局注册组件或插件技巧

全局组件注册方式：

直接在入口main.js引入注册

import  LoadingView from  './components/Loading.vue';
Vue.component('Loading',LoadingView);

　　

全局插件注册方法：

Vue的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

export default {
    install (Vue, options) {
        // 具体逻辑
    }
}

我们需要在入口mian.js中引入  

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

插件的逻辑是use()即执行一遍install函数，这个时候我们可以给VUE写入全局功能，主要依靠下面五个方法

1、使用 Vue.mixin全局混入数据

mixin可以混入一个对象到全局中，让全局都可以读取，需要注意的是这个对象数据是每个组件独享的，修改只能在当前组件生效；

Vue.mixin({
            data () {
                return {
                    global:'www.aiyexue.com'
                }
            }
        })

2、通过原型链往全局写入方法

比如一个加载插件，我们可以在全局写入显示和关闭函数

Vue.prototype.$loading.show=function(){
  show();    
}
Vue.prototype.$loading.hide=function(){
  hide();    
}

3、定义全局过滤器使用Vue.filter

Vue.filter('addZero', function (num) {
            return num + '.00'
        })

4、定义全局指令Vue.directive

Vue.directive('myfocus', {
            inserted: function (el) {
                el.focus()
            }
        })

5、引入全局主机进行混合操作

以上方法可以混合起来开发强大的功能插件，并且我们可以混入全局组件

import loading from './loading.vue'
export default {
    install (Vue, options) {
        Vue.component('Loading',loading);
        Vue.prototype.$loading.show=function(){
　　　　　　//逻辑
        }
        Vue.prototype.$loading.show=function(){
　　　　　　//逻辑
        }
    }
}    

　　

 

 

转载于:https://www.cnblogs.com/aiyexue/p/11316353.html