下面我就为大家分享一篇使用use注册vue全局组件和全局指令的方法，具有很好的参考价值，希望对大家有所帮助。
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);
登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
jQuery+ajax读取json数据并按照价格排序示例
vue数据控制视图源码解析
vue 开发一个按钮组件的示例代码
以上就是使用use注册Vue全局组件和全局指令的方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2752766.html
