vue引入组件的几种方法汇总

 更新时间:2023年10月10日 10:55:00   作者:郑建007  
这篇文章主要介绍了vue引入组件的几种方法汇总,包括常用的局部引入,这里需要注意在哪个页面需要就在那个页面引入、注册、使用,本文结合示例代码给大家介绍的非常详细,需要的朋友参考下吧

一、常用的局部引入

<template>
    <div>
        <!--3.使用组件-->
        <Button></Button>
    </div>
</template>
<script>
 // 1. 引入组件
import Button from '../view/button.vue'
export default {
    // 2. 注册组件
    components: {
        Button,
    }
}
</script>

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

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

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

// 1.引入vue
import Vue from 'vue'
import  Child1 from './child1'
import  Child2 from './child1'
import  Child3 from './child1'
import  Child4 from './child1'
import  Child5 from './child1'
Vue.component(Child1)
Vue.component(Child2)
Vue.component(Child3)
Vue.component(Child4)
Vue.component(Child5)

2、在main.js中引入 global.js实现全局注册

优点: 减少每个页面引入的繁琐步骤 、减少了每一页面重复引入的代码,

缺点: 有90%的代码都是重复的

三、自动注册全局引入

注释版:

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

 纯净版:

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

 结构: 

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

相关文章

  • 详解vue几种主动刷新的方法总结

    详解vue几种主动刷新的方法总结

    这篇文章主要介绍了详解vue几种主动刷新的方法总结,文中详细的介绍了几种方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vue-element-admin如何设置默认语言

    vue-element-admin如何设置默认语言

    这篇文章主要介绍了vue-element-admin如何设置默认语言,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 解决Element中el-date-picker组件不回填的情况

    解决Element中el-date-picker组件不回填的情况

    这篇文章主要介绍了解决Element中el-date-picker组件不回填的情况,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • uni-app中使用ECharts配置四种不同的图表(示例详解)

    uni-app中使用ECharts配置四种不同的图表(示例详解)

    在uni-app中集成ECharts可以为我们的应用提供强大的图表功能,我们详细说一下如何在uni-app中使用ECharts,并配置四种不同的图表,感兴趣的朋友跟随小编一起看看吧
    2024-01-01
  • vue 运用mock数据的示例代码

    vue 运用mock数据的示例代码

    本篇文章主要介绍了vue 运用mock数据的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 用vue-cli开发vue时的代理设置方法

    用vue-cli开发vue时的代理设置方法

    今天小编就为大家分享一篇用vue-cli开发vue时的代理设置方法,具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue利用computed配合watch实现监听多个属性的变化

    Vue利用computed配合watch实现监听多个属性的变化

    这篇文章主要给大家介绍了在Vue中巧用computed配合watch实现监听多个属性的变化的方法,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
    2023-10-10
  • Windows系统下使用nginx部署vue2项目的全过程

    Windows系统下使用nginx部署vue2项目的全过程

    nginx是一个高性能的HTTP和反向代理服务器,因此常用来做静态资源服务器和后端的反向代理服务器,下面这篇文章主要给大家介绍了关于Windows系统下使用nginx部署vue2项目的相关资料,需要的朋友可以参考下
    2023-03-03
  • Vue v-for循环之@click点击事件获取元素示例

    Vue v-for循环之@click点击事件获取元素示例

    今天小编就为大家分享一篇Vue v-for循环之@click点击事件获取元素示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • .netcore+vue 实现压缩文件下载功能

    .netcore+vue 实现压缩文件下载功能

    这篇文章主要介绍了.netcore+vue 实现压缩文件下载功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09

最新评论