Vue.use()&Vue.component()

1,009 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

铺垫下背景

    国庆公司调班,闲来无事便混迹于众多聊天群中,只听某群一声大吼(艾特我了),问及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()注册插件。

  1. 这个方法接收一个参数。这个参数必须具有install方法。Vue.use函数内部会调用参数的install方法。

  2. 如果插件没有被注册过,那么注册成功之后会给插件添加一个installed的属性值为true。Vue.use方法内部会检测插件的installed属性,从而避免重复注册插件。

  3. 插件的install方法将接收两个参数,第一个是参数是Vue,第二个参数是配置项options。

  4. 在install方法内部可以添加全局方法或者属性、全局指令、mixin混入、添加实例方法、使用Vue.component()注册组件等。

使用Vue.component()注册插件。

  1. 使用Vue.component()方法注册全局组件。

  2. 第一个参数是自定义元素名称,也就是将来在别的组件中使用这个组件的标签名称。

  3. 第二个参数是将要注册的Vue组件。