vue3中通过ref和$parent结合defineExpose实现父子组件之间的通信

**Vue3 中的父子组件通信**

在 Vue2.x 中，父子组件之间的通信通常是通过 `$parent` 或 `$root` 来实现的。但是在 Vue3 中，这种方式已经被弃用了。取而代之的是 `ref` 和 `defineExpose` 这两个新特性。

**什么是 ref?**

在 Vue3 中，`ref` 是一个用于创建响应式引用（reactive reference）的函数。它可以将一个普通的 JavaScript 值转换为一个响应式值，使其能够与 Vue 的响应式系统进行交互。

例如：

javascriptconst count = ref(0);

在这个例子中，`count` 是一个响应式引用，它的初始值是0。每当 `count` 的值发生变化时，Vue 的响应式系统都会被通知更新。

**什么是 defineExpose?**

`defineExpose` 是一个用于定义组件暴露的属性和方法的函数。在 Vue3 中，每个组件都有一个隐式的 `$exposed` 对象，它包含了该组件暴露的所有属性和方法。通过 `defineExpose` 函数，可以将某些属性或方法添加到这个对象中，使它们能够被外部访问。

例如：

javascriptexport default {
 setup() {
 const count = ref(0);
 defineExpose({ count });
 return () => h('div', 'Count: ' + count.value);
 },
};

在这个例子中，`count` 是一个响应式引用，它被暴露到了组件的 `$exposed` 对象中。这样，外部就可以通过 `this.$parent.count` 或 `this.$root.count` 来访问它。

**父子组件通信示例**

现在，我们来看一个简单的例子：两个组件之间的通信。

javascript// Parent.vue<template>
 <div>
 <Child @update-count="handleUpdateCount" />
 Count: {{ count }}
 </div>
</script>

<script setup>
import Child from './Child.vue';
const count = ref(0);
defineExpose({ count });
function handleUpdateCount(newCount) {
 count.value = newCount;
}
</script>

javascript// Child.vue<template>
 <button @click="handleClick">Increment Count</button>
</template>

<script setup>
import { defineExpose } from 'vue';
const emit = defineExpose();
function handleClick() {
 emit('update-count', count.value +1);
}
</script>

在这个例子中，`Parent.vue` 组件暴露了一个 `count` 属性，并定义了一个 `handleUpdateCount` 函数来更新该属性。`Child.vue` 组件通过 `$exposed` 对象访问到了 `count` 属性，并将其值传递给 `Parent.vue` 组件的 `handleUpdateCount` 函数。

**总结**

在 Vue3 中，父子组件之间的通信可以通过 `ref` 和 `defineExpose` 来实现。`ref` 可以创建响应式引用，使其能够与 Vue 的响应式系统进行交互，而 `defineExpose` 可以将某些属性或方法暴露到组件的 `$exposed` 对象中，使它们能够被外部访问。通过这种方式，可以实现父子组件之间的通信和数据共享。