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

使用use注册Vue全局组件和全局指令的方法,第1张

下面我就为大家分享一篇使用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全局组件和全局指令的方法的详细内容,更多请关注php中文网其它相关文章!

文章来源:https://www.php.cn/faq/399545.html

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复