vue使用use自定义全局组件和指令

使用use注册全局的组件和全局指令

Vue中的组件和指令分为局部组件、局部指令和全局组件、全局指令。对于注册有一定数量的全局指令和全局组件时，官方文档中的方法就显得有些不够轻便了。
           

1. 全局组件

   在Vue官方文档中介绍的是使用Vue.component(tagName, options)来创建一个全局组件。但是这种方法是与根实例写在同一个文件中，如果要同时注册多个全局组件，就会使根实例文件过重，因此使用Vue.use()来“安装”全局组件，就显得更轻一些。

   我们在前面学习到是用别人的组件：Vue.use(VueRouter)、Vue.use(Mint)等等。其实使用的这些都是全剧组件，这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的原理，而我们再用Axios做交互，则不能使用Vue.use(Axios)，因为Axios没有install

   方法一：

   1.新建一个plugins文件夹

   2.在文件夹中创建放置全局组件的文件components.js

   3.在components.js文件中引入所有要注册的全局组件

   4.在app.js根实例文件中，引入components.js

以eg组件为例:

components.js:


import eg from '../components/eg.vue';
export default (Vue)=>{
    Vue.component("Eg",eg);
}

app.js:

import components from './plugins/components.js';
Vue.use(components);
           

经过上述编写后，就注册了全局组件Eg。

方法二：

自定义一个全局Loading组件，并使用：

总结目录：

|-components

　　|-loading

　　　　|-index.js 导出组件，并且install

　　　　|-loading.vue 定义Loading组件，这里面基本的style ,script中之前讲的methods,data方法都可以使用

index.js中的代码：

import LoadingComponent from ‘./loading.vue’

　　const Loading={

　　　　install:function(Vue){ //核心部分，在我们使用Vue.use()时，自动调用的是install，而install导出的必须是的组件

　　　　Vue.component(‘loading’,LoadingComponent);

　　}

};

export default Loading;

main.js中要使用：

　　import loading from ‘./components/loading’

　　Vue.use(loading); //调用的是install里面的组件

在需要注册多个全局组件的情况下，使用这种方式就显得更加清爽。

1. 全局指令

   对于全局指令的注册，官方文档给出的方法是使用Vue.directive()，位置同样是在根实例文件下，那么问题来了，如果多个全局指令，再加上多个全局组件，那么app.js文件将变得臃肿无比。

   因此，同上面的注册全局组件方法相似，也是使用Vue.use()来“安装”全局指令。

   方法：

   1.新建一个plugins文件夹

   2.在文件夹中创建放置全局组件的文件directives.js

   3.在directives.js文件中引入所有要注册的全局指令

   4.在app.js根实例文件中，引入directives.js

以v-focus指令为例：

directives.js:

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

app.js

import directives from "./plugins/directives.js"
Vue.use(directives);
           

这样就注册了全局指令。