vue引入组件的几种方法代码示例

妚簫尐

一、常用的局部引入

1. <template>
   
2.     <div>
   
3.         <!--3.使用组件-->
   
4.         <Button></Button>
   
5.     </div>
   
6. </template>
   
7. 
   
8. <script>
   
9. // 1. 引入组件
   
10. import Button from '../view/button.vue'
    
11. export default {
    
12.     // 2. 注册组件
    
13.     components: {
    
14.         Button,
    
15.     }
    
16. }
    
17. </script>

复制代码

总结： 在哪个页面需要就在那个页面引入、注册、使用

二、创建一个js 进行统一注册   然后在main.js引入统一管理的js文件实现全局注册

1、global.js统一注册管理：

1. // 1.引入vue
   
2. import Vue from 'vue'
   
3. import  Child1 from './child1'
   
4. import  Child2 from './child1'
   
5. import  Child3 from './child1'
   
6. import  Child4 from './child1'
   
7. import  Child5 from './child1'
   
8. 
   
9. Vue.component(Child1)
   
10. Vue.component(Child2)
    
11. Vue.component(Child3)
    
12. Vue.component(Child4)
    
13. Vue.component(Child5)

复制代码

2、在main.js中引入 global.js实现全局注册
优点： 减少每个页面引入的繁琐步骤 、减少了每一页面重复引入的代码，
缺点： 有90%的代码都是重复的

三、自动注册全局引入

注释版：

1. // 引入vue
   
2. import Vue from 'vue'
   
3. // 将字符串首字母大写  返回当前字符串
   
4. function changeStr(str) {
   
5.     return str.charAt(0).toUpperCase() + str.slice(1)
   
6. }
   
7. // require.context: 是动态引入文件
   
8. // 参数一: 当前路径（引入.vue文件的当前路径）
   
9. // 参数二：是否匹配当前文件下的子文件
   
10. // 参数三：查找文件格式以.vue结尾的文件
    
11. const requireComponent = require.context('./', false, /\.vue$/)
    
12. console.log("批量注册组件", requireComponent.keys())  // ['./head-l.vue', './head-r.vue', './head.vue']
    
13. requireComponent.keys().forEach(fileName => {
    
14.         // 当前组件
    
15.     const config = requireComponent(fileName)
    
16.         console.log("组件的信息config", config)
    
17.         //获取组件名
    
18.         const componentName = changeStr(fileName.replace(/^\.\//, '').replace(/\.\w+$/))  // 第一个replace(/^\.\//, '')去掉前面的./   第二个replace(/\.W+$/)是去掉后面的.vue
    
19.         console.log("组件名", componentName)  // 例如：Head-rundefined
    
20.         // 参数一： 组件名
    
21.         // 参数二： config：是一整个组件的内容；  config.default：是组件中export.default里面的内容  
    
22.         Vue.component(componentName, config.default || config)
    
23.        
    
24. })

复制代码

纯净版：

1. import Vue from 'vue'
   
2. function changeStr(str) {
   
3.     return str.charAt(0).toUpperCase() + str.slice(1)
   
4. }
   
5. const requireComponent = require.context('./', false, /\.vue$/)
   
6. requireComponent.keys().forEach(fileName => {
   
7.     const config = requireComponent(fileName)
   
8.         const componentName = changeStr(fileName.replace(/^\.\//, '').replace(/\.\w+$/))  
   
9.         Vue.component(componentName, config.default || config)
   
10.        
    
11. })

复制代码

结构：

附：vue 中 import引入相同的方法名称解决方法

1. import { list } from '@/api/aaaa/apiJs'
   
2. import { list} from '@/api/bbb/apiJs'

复制代码

当引入了2个不同的文件，方法名称

1. list

复制代码

都是一样的，就会出现报错。
如果之前文件用的地方比较多，直接改名称的话，可能会漏掉，会引起不必要的麻烦，那如何解决呢

解决方法：

1. import { list } from '@/api/aaaa/apiJs'
   
2. import { list as _list} from '@/api/bbb/apiJs'

复制代码

就是使用

1. import as

复制代码

1. as

复制代码

后面的名字就是你要替换的名称，是不是很简单就解决了

总结

到此这篇关于vue引入组件的几种方法的文章就介绍到这了,更多相关vue引入组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/319029lgu.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！