vue自定义组件

胡崽崽!

已于 2022-02-14 20:32:25 修改

阅读量5.9k

点赞数 2

文章标签： vue.js javascript 前端

于 2022-02-14 11:27:32 首次发布

本文链接：https://blog.youkuaiyun.com/m0_62198921/article/details/122913972

版权

本文介绍了Vue自定义组件的创建和使用，强调了组件化的优点，如复用性和封装性。文章详细讲解了全局组件的注册，并探讨了组件间的通讯方式，包括父传子、子传父以及兄弟组件间的数据传递。此外，还提到了如何处理组件样式穿透问题，通过`scoped`以及特定语法来控制样式的作用域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般在项目src中创建一个components文件夹存放我们自定义的组件，在需要的页面直接使用

1.第一步：在页面中引入子组件,(假设在components文件下有一个myHeader.vue组件)
import myHeader from '@/components/myHeader.vue'
2.第二步：注册子组件
components:{
	myHeader
}
3.第三步：作为标签使用
<myHeader />
或者
<myHeader></myHeader>

使用组件的好处

组件是可以复用性的
易于维护
有封装性，易用于使用
大型项目中降低组件之间复用性

全局组件

组件分为：全局组件和局部组件
全局组件在main.js中直接使用Vue.component

import Loading from '@/components/myLoading.vue'
Vue.component('loading',Loading)

局部组件

<script>
import Loading from '@/components/myLoading.vue'
export default {
	data() {
		return {}
	},
	components:{
		Loading,
	}	
}
</script>

组件之间的通讯方式

父传子

在父组件的子组件标签上绑定一个自定义属性，挂在要传输的变量，在子组件上通过props来接收，props可以是数组也可以是对象

子传父

在父组件的子组件上绑定一个自定义事件，接收子组件传递过来的事件，子组件通过$emit 触发父组件上的自定义事件，发送参数

兄弟之间

通过在main.js中初始化一个全局的$bus,在发送事件的一方通过$bus.$emit('事件名'，传递的参数信息)发送，在接收事件的一方通过bus.$on('事件名，参数')接收传递的事件

组件样式穿透

为了让组件中的样式不影响其他组件的样式，只在当前组件起作用，我们会加上scoped

<style lang ='scss'></style>

有时候我们想让某个样式影响子组件，这时候我们可以使用操作符

css中
<style scoped>
	>>> .active {}
</style>
sass中
<style lang='scss' scoped>
	/deep/ .active {}
</style>