一篇详细说清组件间的数据通信方式（Vue2&Vue3）

前言

在项目开发中，组件之间存在着以下三种关系：父子关系、兄弟关系和后代关系。如下图：

其中，根组件Root和它的3个子组件是父子关系，Article、Item组件与根组件是后代关系；Header组件和Main、Aside组件以及它们的后代组件都是兄弟关系。组件之间通信的常见方式有以下几种：

Props（父传子）

父组件通过 v-bind 属性绑定向子组件共享数据。同时，子组件需要使用 props 接收数据。具体可查看：Props（父传子）.

$emit（子传父）

子组件通过自定义事件的方式向父组件共享数据。具体可查看：自定义事件（子传父）.

父访问子

1、ref

虽然 Vue 的声明性渲染模型抽象了大部分对 DOM 的直接操作，在某些情况下，我们需要直接访问底层 DOM 元素，因此我们可以使用这个特殊的属性：ref 。它允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用，挂载结束后引用都会被暴露在 this.$refs 之上。被用来给元素或子组件注册引用信息（id的替代者），它应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（VueComponent）。每个vue的组件实例上，都包含一个 $refs 对象，里面存储着对应的DOM元素或组件的引用。默认情况下，组件的$refs指向一个空对象。

<div id="app">
	<h1 ref="title">根组件</h1>
	<hr />
	<HelloWorld ref="component" />
	<button @click="btnClick">点我<