Vue3：组件间通信-$refs和$parent的使用

一、情景说明

我们在之前，学习了Vue3：标签的ref属性用法
我们知道，父组件中，给子组件使用ref标记后，获取到的是，子组件实例。
那么，我们就可以修改子组件实例暴露的变量值。

与之对应的是，子组件获取父组件的实例，从而修改父组件的变量值。

所以，这也可以理解为父子组件之间通信，更准确的说是，父子组件间修改数据。

父组件批量修改多个子组件数据：$refs
子组件修改父组件数据：$parent

二、案例

1、$refs用法

父组件
模板代码：参数$refs

		<button @click="getAllChild($refs)">让所有孩子的书变多</button>
		<Child1 ref="c1"/>
		<Child2 ref="c2"/>

按钮对应的函数代码
这里，就可以同时获取到c1和c2两个实例

	function getAllChild(refs:{[key:string]:any}){
		console.log(refs)
		for (let key in refs){
			refs[key].book += 3
		}
	}

两个子组件
暴露变量，这样父组件就可以操作该变量

	// 把数据交给外部
	defineExpose({book})

2、$parent用法

子组件
模板代码：参数$parent

<button @click="minusHouse($parent)">干掉父亲的一套房产</button>

按钮对应的函数代码

	function minusHouse(parent:any){
		parent.house -= 1
	}

父组件
暴露变量

	// 向外部提供数据
	defineExpose({house})

大家可能会疑问，父组件可以有多个子组件，所以，有对应的$refs
那么，子组件，也可以被多个父组件引用，那是否存在$parents呢？
明确的告诉你，Vue3中没有$parents!
但是，用另外一个办法实现了!