在实际的开发中,我们进行组件和插件的注册时候,发现那些插件和组件有些会推荐我们使用Vue.use()方法进行注册,有些又会推荐我们使用Vue.component(),今天就这两个注册方法来简单的谈一谈个人的理解
一、使用Vue.component()注册
首先我们使用Vue.component()注册的大部分是一些我们需要进行全局运用的自定义,所以我们会到main.js里面进行注册。 Vue.component()里面接收两个参数
第一个参数是自定义元素名称，也就是将来在别的组件中使用这个组件的标签名称。
第二个参数是将要注册的Vue组件。
1.单个自定义组件的注册
例如我现在要注册一个全局组件
首先我需要到在components全局组件的文件夹中定义好这个组件
然后到我们main.js文件中进行全局的注册
import topTitle from '@/components/topTitle'
Vue.component('topTitle', topTitle)
// Vue.component(topTitle.name, topTitle) 在组件中定义了name的情况下可以这样进行注册
这样我们就可以在全局其他组件中直接对这个组件进行使用就可以了
2.多个自定义组件的注册
当我们需要进行多个组件的注册时候,假如说都写到main.js里面的话,这样就会造成main.js文件的臃肿与杂乱,那这时我们该怎么办呢?
讲到这里就不得不说到Vue.use()注册与Vue.component()的关系了,讲完就知道怎么进行操作了
二、使用Vue.use()注册
一般开发中,我们常用Vue.use()方法进行注册有Vue.use(Router)、Vue.use(Element-ui)等
import ElementUI from 'element-ui'
import Router from 'vue-router'
Vue.use(Router)
Vue.use(Element-ui)
那么这些组件或者插件跟我们自定义的组件有什么不同呢?
要知道这个问题,我们首先得知道Vue.use()接收的是一个什么参数
首先使用Vue.use注册插件。这个方法接收一个对象。并且这个参数必须具有install方法。
这里我们创建一个演示用的一个js文件
然后再里面先引入一个我们自己的组件 再默认导出一个对象,里面有一个install的方法
import topTitle from '@/components/topTitle'
export default {
install(V) {
console.log(V)
console.dir(V)
V.component(topTitle)
}
}
再将这个方法在main.js中进行导入并且进行注册
import yanshi from './演示用'
Vue.use(yanshi)
我们去启动项目,看看控制台打印出来的install方法中的传入值,看完这个打印值,估计就有一部分小伙伴能明白了
没错,这里的接收值就是我们的Vue实例
Vue.use函数内部会调用参数的install方法,并且将Vue实例传入过去
为了让大家更明显的看出来,我们可以进行一下比对,我们先实例化Vue,再进行一下比对.结果是true 代表这两者就是一个东西
有这个vue的实例在,我们可以在在install方法内部可以添加全局方法或者属性、全局指令、添加实例方法、使用Vue.component()注册组件等
这也是为什么有些组件或者插件可以直接Vue.use()注册,因为他们在内部有一个install方法进行了注册。而为了避免重复注册的结果,会提示我们注册方法
小结: Vue.use()注册与Vue.component()注册区别就在于一个insatll方法
说到这,大家就知道怎么进行大量的自定组件的全局注册了
我们可以先创建一个js文件,将所有需要进行全局注册的组件导入后,直接在内部默认导出一个带有install(Vue)方法的对象,直接使用Vue.component()进行注册,再将js文件在main.js中进行注册就好了
虽然Vue.use()注册与Vue.component()注册区别就在于一个insatll方法,但是两者之间的内部联系,这次就先不讲了,等下次有时间再出一篇两者之间的构造器指向问题
最后 有说的不对的地方,欢迎大家批评指正,另外也希望大家多点赞!!
