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(){
　　　　　　//邏輯
        }
    }
}