16 - Vue 学习笔记 - 组件通信父子组件的访问方式

有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件

• 父组件访问子组件：使用 $children 或 $refs
• 子组件访问父组件：使用 $parent

父访问子

$children 访问

this.$children 是一个数组类型，它包含所有子组件对象。
因为子组件不可能只有一个，所以获取的是一个数组类型。
我们可以通过遍历，遍历每个子组件。

<div id="app">
	<!-- 创建3个组件 -->
	<cpn></cpn>
	<cpn></cpn>
	<cpn></cpn>
	<button @click="btnClick">按钮</button>
</div>

<template id="cpn">
	<div>我是子组件</div>
</template>

<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			message: "hello"
		},
		methods: {
			btnClick() {
				//  $children 获取子组件数组
				console.log(this.$children);
				for (let ch of this.$children) {
					// 打印 children 的 name
					console.log(ch.name);
					// 调用 children 的 showMessage 方法
					ch.showMessage();
				}
			}
		},
		components: {
			cpn: {
				template: `#cpn`,
				data() {
					return {
						name: '我是子组件的name'
					}
				},
				methods: {
					showMessage() {
						console.log('showMessage')
					}
				}
			}
		}
	});
</script>

但是这种方法其实不常用，因为我们无法直到具体某个子组件的下标，并且，如果我们中途加入几个子组件，下标就又变了。所以我们可以采用下面这一种方法。

$refs 访问

我们给第三个组件添加属性 ref=“three”

<cpn></cpn>
<cpn></cpn>
<cpn ref="three"></cpn>

然后在 btnClick 中我们使用 $refs 获取子组件

methods: {
	btnClick() {
		// $refs.名 就可以获取对象
		// $refs.three 就得到了第三个 cpn 的对象
		console.log(this.$refs.three.name); // 获取 name
	}
}

如果没有找到对应的 ref 会得到一个空对象。

---

子访问父

$parent

$parent 可以获取最近最近的父元素，并且是唯一的。

<div id="app">
	<cpn></cpn>
</div>

<template id="cpn">
	<div>
		<h2>我是子组件</h2>
		<button @click="btnClick">子组件按钮</button>
		<!-- 子子组件	-->
		<ccpn></ccpn>
	</div>
</template>

<template id="ccpn">
	<div>
		<h2>我是子组件的子组件</h2>
		<button @click="btnClick">子组件的子组件按钮</button>
	</div>
</template>

<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			message: "hello"
		},
		components: {
			cpn: {
				template: `#cpn`,
				methods: {
					btnClick() {
						// 1. 访问父组件 $parent
						console.log(this.$parent);
						console.log(this.$parent.message);
					}
				},
				data() {
					return {
						name: "我是子组件"
					}
				},
				components: {
					ccpn: {
						template: `#ccpn`,
						methods: {
							btnClick() {
								// 1. 访问父组件 $parent
								console.log(this.$parent);
								console.log(this.$parent.name);
							}
						}
					}
				}
			}
		}
	});
</script>

同样这种方法在开发中也不常用，如果使用太多就造成这个组件的复用性不高，比如有个子组件访问了父组件的 name 但是将这个组件放到另一个地方使用时，这个地方的父组件就不一定还有 name 这个属性了。

$root

$root 可以访问根组件，也就是 Vue 实例，我们将上面的子子组件的 btnClick 更改一下：

methods: {
	btnClick() {
		// 访问父组件 $parent
		console.log(this.$root);
		console.log(this.$root.message);
	}
}

可以发现得到的就是 Vue 实例，也就是 app。