vue 全局註冊

當你註冊完之後，可以在任何組件中直接使用，而不需要在各個組件中引入並局部註冊

通常公共組件放在src文件夾下的components文件夾中，這裏的組件進行全局註冊。

 

* 全局組件

1、在src文件夾中新建utils文件夾，utils文件夾中一般存放通用的輔助文件(方法、數據等)

2、在文件夾中新建components.js文件

3、在components.js文件引入所有要註冊的全局組件

4、在main.js中引入components.js文件並使用Vue.use()全局註冊

 

utils - components.js

import ComponentA from '@/components/ComponentA' // ComponentA
import ComponentB from '@/components/ComponentB' // ComponentB

export default (Vue)=>{
  Vue.component("ComponentA", ComponentA)
  Vue.component('ComponentB', ComponentB)  
}

 main.js

import components from '@/utils/components.js'
Vue.use(components)

new Vue({
  // ...
})

* 全局指令  

全局指令的註冊方法同全局組件

utils - directives.js

export default (Vue)=>{
    Vue.directive("focus", {
        inserted: function (el) {
            el.focus();
        }
    })
}

main.js

import directives from '@/utils/directives.js'
Vue.use(directives)

new Vue({
  // ...
})

* 全局過濾器

全局過濾器的註冊方法同全局組件

utils - filters.js

export default {
    // 操作返回無百分號的數據
    numUpDown(v) {
        return isNaN(v)?v:(v>0?('+'+v):v);
    },
    //...
};

main.js

import filters from '@/utils/filters';

Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key]);
});

<p>{{ data| numUpDown}}</p>

* 全局方法

utils - allFunc.js

exports.install = function(Vue, options) {
    Vue.prototype.$back = function() { //全局函數1
        xxx
    };
    Vue.prototype.$pushH = function() { //全局函數2
        xxx
    };
    Vue.prototype.$pushHN = function() { //全局函數3
        xxx
    };
};

main.js

import all from '../static/js/all';
Vue.use(all);//將全局函數當做插件來進行註冊

go: function() {
    　　this.$back();               
    }

參考資料：

https://cn.vuejs.org/v2/api/#filters