Vue - 组件通信（父子单向传递、父子相互传递、祖孙隔代传递）

父组件向子组件单向传递

1. 父组件：引入子组件后，通过属性绑定的形式，将值传入子组件；

<template>
	<div>
		<son :sonGetParam="param2Son"></son>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				param2Son: "孩子，你好"
			}
		}
	}
</script>

2. 子组件：子组件通过props接收父组件传入的值;

<template>
	<div>
		<!-- 这里会展示出父组件传入的值：孩子，你好 -->
		<p>{{sonGetParam}}</p>
	</div>
</template>

<script>
	export default {
		props: {
			sonGetParam: {
			  type: String,
			  default: "",
			},
		}
	}
</script>

子组件向父组件单向传递

1. 父组件：引入子组件后，自定义一个用来处理自定义事件的方法，接收子组件传递的值；

<template>
	<div>
		<son @parentEvent="processEvent"></son>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				sonParam: ""
			}
		},
		methods: {
			// 监听并接收子组件传递的值
			processEvent(param) {
				this.sonParam = param; // Hello
			}
		}
	}
</script>

2. 子组件：子组件通过$emit触发自定义事件，将值传递给父组件；

<template>
	<div>
		<button @click="handleChildEvent">触发事件</button>
	</div>
</template>

<script>
	export default {
		methods: {
			handleChildEvent(param) {
				this.$emit('parentEvent', 'Hello')
			}
		}
	}
</script>

父组件和子组件相互传递

1. 通过自定义函数的方式

①. 父组件：

<template>
	<div>
		<son :param="param" @changeParam="(data) => param = data"></son>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				param: ""
			}
		}
	}
</script>

②. 子组件：

<template>
	<div>
		<button @click="handleChildEvent">触发事件</button>
	</div>
</template>

<script>
	export default {
		methods: {
			handleChildEvent(param) {
				this.$emit('changeParam', 'changed')
			}
		}
	}
</script>

2. 使用.sync进行双向绑定： 是“v-on:update:参数名”的简化写法

①. 父组件：

<template>
	<div>
		<son :param.sync="param"></son>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				param: ""
			}
		}
	}
</script>

②. 子组件：使用$emit('update:param');

<template>
	<div>
		<button @click="handleChildEvent">触发事件</button>
	</div>
</template>

<script>
	export default {
		methods: {
			handleChildEvent(param) {
				//“update:参数名”是vue约定俗成的
				this.$emit('update:param', 'changed')
			}
		}
	}
</script>

爷组件和孙组件隔代传递(适用于vue2.4.0版本以上)

①. 爷组件：定义处理值的自定义函数 和 接收孙组件传递过来的值的参数，同时将此值传递到孙组件；

<template>
	<div>
		<father :param="param" @eventMethod="handleEventMethod"></father>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				param: ""
			}
		},
		methods: {
			handleEventMethod(data) {
				this.param = data
			}
		}
	}
</script>

②. 父组件：使用“$attrs.参数名”获取父组件中除了prop传递的属性、class、style的属性；“v-on='$listeners'”获取作用在这个组件上的所有监听器；

<template>
	<div>
		<son :param="$attrs.param" v-on="$listeners"></father>
	</div>
</template>

③. 孙组件：通过props获取父组件传递的值；$emit('方法名'， 需要传递的参数) 来触发自定义函数并传递值；

<template>
	<div>
		<p>{{param}}</p>
		<button @click="handleChildEvent">触发事件</button>
	</div>
</template>

<script>
	export default {
		props: {
			param: {
			  type: String,
			  default: "",
			},
		},
		methods: {
			handleChildEvent() {
				this.$emit('eventMethod', "changedParam")
			}
		}
	}
</script>