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

本文主要是介绍Vue3：组件间通信-$refs和$parent的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、情景说明

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

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

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

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

父组件
模板代码：参数$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})

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

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

按钮对应的函数代码

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

父组件
暴露变量

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

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

这篇关于Vue3：组件间通信-$refs和$parent的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！