java中的接口是类吗
515
2023-02-14
使用use注册Vue全局组件和全局指令的方法
vue中的组件和指令分为局部组件、局部指令和全局组件、全局指令。对于注册有一定数量的全局指令和全局组件时,官方文档中的方法就显得有些不够清爽了。
全局组件
在VueziwmEL官方文档中介绍的是使用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。
ziwmEL
在需要注册多个全局组件的情况下,使用这种方式就显得更加清爽!
全局指令
对于全局指令的注册,官方文档给出的方法是使用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);
这样就注册了全局指令。
以上这篇使用use注册Vue全局组件和全局指令的方法就是分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~