Vue注册组件的几种方式,你都知道吗?
发布时间：2024-01-30 10:00
在开发中,经常需要将业务进行组件化,我们就需要去注册组件,下面列举几种常用的注册组件的方法
-
局部注册组件
1.首先需要将要注册的组件进行引入
![\"\"](\"https://img-blog.csdnimg.cn/8e1a28c6122b4912baebe1d0dd1f9fd7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56iX5a2Q6YWS,size_20,color_FFFFFF,t_70,g_se,x_16\")
2.在script标签中进行注册,注意:组件注册的名字和引入的名字需要保持一致即可进行简写
![\"\"](\"https://img-blog.csdnimg.cn/48ad036f038547008c4fccbceea699a5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56iX5a2Q6YWS,size_20,color_FFFFFF,t_70,g_se,x_16\")
3.在template标签中以html的标签格式进行使用
![\"\"](\"https://img-blog.csdnimg.cn/6217764830c4460ab7856b17fe45eccd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56iX5a2Q6YWS,size_20,color_FFFFFF,t_70,g_se,x_16\")
-
全局注册组件
1.全局入口在main.js, 在new Vue之上注册
![\"\"](\"https://img-blog.csdnimg.cn/536c91f9fb904273812391236edcae47.png\")
2. 将要注册的组件进行引入
![\"\"](\"https://img-blog.csdnimg.cn/15e1a7a64663439388b34387e8d2c270.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56iX5a2Q6YWS,size_20,color_FFFFFF,t_70,g_se,x_16\")
3. 全局 - 注册组件 语法:Vue.component("组件名", 组件对象)
![\"\"](\"https://img-blog.csdnimg.cn/bf57e3e49ebd4a8d8e8feba5b3a8fcd6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56iX5a2Q6YWS,size_18,color_FFFFFF,t_70,g_se,x_16\")
4. 在template标签中以html的标签格式进行使用
![\"\"](\"https://img-blog.csdnimg.cn/b5ff5ec0da384aa0a88a75e49cad3ba9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56iX5a2Q6YWS,size_20,color_FFFFFF,t_70,g_se,x_16\")
-
使用Vue.use()来注册组件
-
实现的原理：
- 1-需要传入一个参数：对象||函数
- 2-对象中提供了一个install函数
- 3-install函数有一个参数接受的是Vue
1. 在公共components文件的index.js中导出需要注册的组件
![\"\"](\"https://img-blog.csdnimg.cn/8d88481c10004e1b9d8672d3e2c3c5c5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56iX5a2Q6YWS,size_20,color_FFFFFF,t_70,g_se,x_16\")
2.在公共components文件的index.js中导出需要注册的组件
![\"\"](\"https://img-blog.csdnimg.cn/44a767c7984b4beb85daa5d1c2addb83.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56iX5a2Q6YWS,size_20,color_FFFFFF,t_70,g_se,x_16\")
3.在入口文件main.js中使用vue.use()进行注册
![\"\"](\"https://img-blog.csdnimg.cn/789932c344e640fe919357cf4c289565.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56iX5a2Q6YWS,size_16,color_FFFFFF,t_70,g_se,x_16\")
如果使用的是函数的方法去注册的话 只需要将第一步进行修改即可
![\"\"](\"https://img-blog.csdnimg.cn/06bd5f50befc4ca7a3e1363f330d066f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56iX5a2Q6YWS,size_20,color_FFFFFF,t_70,g_se,x_16\")
-
搭配webpack来批量注册组件
1. 在公共components文件的index.js中导出需要注册的组件
![\"\"](\"https://img-blog.csdnimg.cn/3c3bca20f11349a2b3e89ddfd028a6e4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56iX5a2Q6YWS,size_20,color_FFFFFF,t_70,g_se,x_16\")
2.在入口文件main.js中使用vue.use()进行注册
![\"\"](\"https://img-blog.csdnimg.cn/0fed56989c31445cbf99e21384386cd8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56iX5a2Q6YWS,size_20,color_FFFFFF,t_70,g_se,x_16\")
注释:
![\"\"](\"https://img-blog.csdnimg.cn/1685ffd0800f4baab32db83447a4c221.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA56iX5a2Q6YWS,size_20,color_FFFFFF,t_70,g_se,x_16\")
使用这种方法去注册全局公共组件 可以减少一部分代码量和重复的导入与注册 一次注册 多次使用但是需要注意的是每一个组件的name都必须有 否则就会出现组件注册不了的情况