动用use注册Vue全局组件和全局指令的措施

 新葡新京     |      2019-12-16 19:12

应用use注册Vue全局组件和大局指令的形式,usevue

Vue中的组件和下令分为局地组件、局部指令和全局组件、全局指令。对于注册有自然数量的全局指令和全局组件时,官方文书档案中的方法就彰显略略相当不够清爽了。

全局组件

在Vue官方文书档案中牵线的是应用Vue.component(tagName, options卡塔尔(英语:State of Qatar)来创立一个大局组件。然而这种措施是与根实例写在同一个文书中,固然要同有的时候候登记八个全局组件,就能够使根实例文件过重,由此利用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);

诸如此比就注册了全局指令。

上述那篇使用use注册Vue全局组件和大局指令的措施正是笔者共享给大家的全体内容了,希望能给大家七个参照他事他说加以考察,也意在我们多多支持帮客之家。

Vue中的组件和指令分为局部组件、局地指令和全局组件、全局指令。对于注册有必然数额的...

上一篇:没有了 下一篇:没有了