小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
铺垫下背景
国庆公司调班,闲来无事便混迹于众多聊天群中,只听某群一声大吼(艾特我了),问及Vue.use()和Vue.componet有什么区别,这两个东西用了挺长一段时间的vue以来,具体的用法其实早就不言而喻了,但具体被问题需要用文字去描述到还是第一次。
所以就搞一搞,最起码要用自己的问题给它理一理。
话不多说,搞一下。
用的时候
Vue.use()
啥时候用?就我来说,经常是项目建好之后引入UI组件库,我最爱按需引入,所以会这时候就会搭配到Vue.use()
。
// main.js
import {Button } from 'Element-ui';
Vue.use(Button);
但是Vue.component()
什么时候用呢?
// main.js
import Loading from './loading.vue';
// 将loading注册为全局组件,在别的组件中通过<loading>标签使用Loading组件
Vue.component('loading', Loading);
如上所示,都是在载入组件,但两者的区别挺大的,看过组件库源码的小伙伴应该会更清楚带你,组件库的组件是有一个install 的方法的。因此可以总结以下的区别
使用Vue.use()
注册插件。
-
这个方法接收一个参数。这个参数必须具有install方法。Vue.use函数内部会调用参数的install方法。
-
如果插件没有被注册过,那么注册成功之后会给插件添加一个installed的属性值为true。Vue.use方法内部会检测插件的installed属性,从而避免重复注册插件。
-
插件的install方法将接收两个参数,第一个是参数是Vue,第二个参数是配置项options。
-
在install方法内部可以添加全局方法或者属性、全局指令、mixin混入、添加实例方法、使用Vue.component()注册组件等。
使用Vue.component()
注册插件。
-
使用
Vue.component()
方法注册全局组件。 -
第一个参数是自定义元素名称,也就是将来在别的组件中使用这个组件的标签名称。
-
第二个参数是将要注册的Vue组件。