Vue中的父传子、子传父以及任意组件之间通信

最新推荐文章于 2024-06-26 09:20:14 发布

原创最新推荐文章于 2024-06-26 09:20:14 发布 · 601 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue学习专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了Vue中组件间的通信方式，包括父组件向子组件传递数据（props）、子组件如何反馈信息给父组件（事件冒泡和自定义事件）以及任意组件之间的通信（全局事件总线）。重点讲解了props的使用，如只读特性、数据类型限制、必要性和默认值设定，以及子组件如何通过调用父组件方法或触发自定义事件来更新父组件状态。此外，还提到了使用全局事件总线实现组件间通信的方法，强调了解绑事件的重要性。

一、父传子——利用props配置项

功能：让组件接收外部传过来的数据
传递数据：<label :age="18"/>
接收数据：
1. 第一种方式（只接收）：props:['age']
2. 第二种方式（限制类型）：props:{age:Number}
3. 第三种方式（限制类型、限制必要性、指定默认值）：
```
props:{
	age:{
    	type:Number, //类型
    	required:true, //必要性
    	default:18 //默认值
	}
}
```
注意：props是只读的，Vue底层会监测props的修改，如果进行了修改，就会发出警告，若确实需要修改，那么可将props的内容到data中一份，然后再去修改data中的数据。

二、子传父（两种方法）

当父组件将数据传给子组件时，子组件通过props接受，此时数据来源自父组件，若子组件想对接收到的数据进行修改时，vue中不建议在子组件中对这些数据进行修改，这些任务应该交给父组件自己完成，此时修改数据可使用两种方法

1.父组件定义操作数据的函数，然后将该函数传给子组件，子组件通过props属性接收后，调用该函数并传参，修改数据的操作部分仍放在父组件中（该方法一般不用）

父组件

<template>
    <div>
        {{number}}
        <child :changenum="changenum"/>
    </div>
</template>

export default {
	name: 'parent',
	data() {
		return {
			number: 1,
		}
	},
	methods: {
		changenum(num) {
			this.number = this.number + num
		}
	}
}

子组件

<template>
    <div>
        <button @click="add">点我加1</button>
    </div>
</template>

export default {
	name: 'child',
	props: ['changenum'],
	methods: {
		add() {
			this.changenum(1)
		}
	}
}

2.组件的自定义事件

一种组件间通信的方式，适用于：子组件 => 父组件，A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件，事件的回调在A中。
绑定自定义事件：
1. 第一种方式，在父组件中：<Child @owndefine="test"/>
2. 第二种方式，在父组件中：
```
<Child ref="xxx"/>
......
mounted(){
   this.$refs.xxx.$on('owndefine',this.test)
}
```
3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
触发自定义事件：this.$emit('owndefine',数据)
解绑自定义事件this.$off('owndefine')
组件上也可以绑定原生DOM事件，需要使用native修饰符。
注意：通过this.$refs.xxx.$on('owndefine',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

三、任意组件之间通信

全局事件总线

安装全局事件总线：

new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this 
		//安装全局事件总线，$bus就是当前应用的实例对象
	},
    ......
})

使用事件总线：

接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
```
methods(){
  demo(data){......}
}
......
  mounted() {
    this.$bus.$on('xxxx',this.demo)
}
```
提供数据：this.$bus.$emit('xxxx',数据)

最后最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。
```
 beforeDestroy() {
    this.$bus.$off('xxx')
}
```