vue 中的组件和指令分为局部组件局部指令和全局组件全局指令对于注册有一定数量的全局指令和全局组件时, 官方文档中的方法就显得有些不够清爽了
全局组件
在 Vue 官方文档中介绍的是使用 Vue.component(tagName, options) 来创建一个全局组件但是这种方法是与根实例写在同一个文件中, 如果要同时注册多个全局组件, 就会使根实例文件过重, 因此使用 Vue.use() 来安装全局组件, 就显得更轻一些
方法:
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
在需要注册多个全局组件的情况下, 使用这种方式就显得更加清爽!
全局指令
对于全局指令的注册, 官方文档给出的方法是使用 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);
这样就注册了全局指令
来源: http://www.jb51.net/article/136091.htm