vue注册全局组件的方法

谁借莪１个温暖的怀抱￠ 2023-02-22 13:55 150阅读 0赞

1、在components文件夹下新建package文件夹 （文件夹可以随意命名），然后在package文件夹下创建index.js  
![在这里插入图片描述][20200110115221653.jpg]  
2. 在index.js中写入如下代码 import Vue from ‘vue’ // 引入vue  
// 第一个参数表示从哪个文件夹开始匹配 这里表示从当前文件夹开始  
// 第二个参数表示是否匹配子文件夹中的内容  
// 第三个参数表示要匹配的文件的类型 这里匹配vue文件  
const componentsContext = require.context(’.’, true, /.vue$/)  
componentsContext.keys().forEach(component => \{  
const componentConfig = componentsContext(component)  
// 如果组件是export default 则使用default  
const ctrl = componentConfig.default || componentConfig  
// 注册组件名称  
Vue.component(ctrl.name, ctrl)  
\})  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dqdzAxMjU_size_16_color_FFFFFF_t_70]  
3. 在main.js中导入该js文件即可![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dqdzAxMjU_size_16_color_FFFFFF_t_70 1]  
4. 注意使用组件时驼峰命名要改成连接符连接的形式 例如 AaBb 要写成 aa-bb

[20200110115221653.jpg]: https://img-blog.csdnimg.cn/20200110115221653.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dqdzAxMjU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200110120532190.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dqdzAxMjU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dqdzAxMjU_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200110115901159.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dqdzAxMjU=,size_16,color_FFFFFF,t_70