vue3父组件获取子组件数据

在 Vue 3 中，父组件可以通过使用 `ref` 或 `reactive` 来获取子组件的数据。

1. 使用 `ref`：
- 在子组件中，使用 `ref` 定义一个变量，并将需要传递给父组件的数据赋值给该变量。

   import { ref } from 'vue';   
   export default {
     setup() {
       const childData = ref('Hello from child');
   
       return {
         childData
       };
     }
   }

- 在父组件中，使用 `ref` 或 `toRef` 来获取子组件的数据。

   import { ref, toRef } from 'vue';
   
   export default {
     setup() {
       const childData = ref('');
   
       // 获取子组件的数据
       const getChildData = () => {
         childData.value = childRef.value.childData;
       };
   
       // 子组件的引用
       const childRef = ref(null);
   
       return {
         childData,
         getChildData,
         childRef
       };
     }
   }

- 在父组件的模板中，可以直接使用 `childData` 来访问子组件的数据。

   <template>
     <div>
       <ChildComponent ref="childRef"></ChildComponent>
       <button @click="getChildData">Get Child Data</button>
       <p>Child data: {{ childData }}</p>
     </div>
   </template>