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