Vue注册组件的几种方式,你都知道吗?

在开发中,经常需要将业务进行组件化,我们就需要去注册组件,下面列举几种常用的注册组件的方法

• 局部注册组件

1.首先需要将要注册的组件进行引入

2.在script标签中进行注册,注意:组件注册的名字和引入的名字需要保持一致即可进行简写

 3.在template标签中以html的标签格式进行使用

• 全局注册组件 

1.全局入口在main.js, 在new Vue之上注册

 

2. 将要注册的组件进行引入

3. 全局 - 注册组件 语法:Vue.component("组件名", 组件对象) 

 

4. 在template标签中以html的标签格式进行使用

• 使用Vue.use()来注册组件 

• 实现的原理：

1. 1-需要传入一个参数：对象||函数
2. 2-对象中提供了一个install函数
3. 3-install函数有一个参数接受的是Vue

1. 在公共components文件的index.js中导出需要注册的组件

2.在公共components文件的index.js中导出需要注册的组件

3.在入口文件main.js中使用vue.use()进行注册

 

 如果使用的是函数的方法去注册的话 只需要将第一步进行修改即可

 

• 搭配webpack来批量注册组件 

1. 在公共components文件的index.js中导出需要注册的组件

 2.在入口文件main.js中使用vue.use()进行注册

 

注释:

使用这种方法去注册全局公共组件 可以减少一部分代码量和重复的导入与注册 一次注册 多次使用但是需要注意的是每一个组件的name都必须有 否则就会出现组件注册不了的情况