vue3通过ref获取子组件defineExpose的数据和方法

1. 父组件:

   <script setup> import { defineAsyncComponent, watchEffect, toRefs, reactive } from 'vue';

   // 异步组件
   const Test = defineAsyncComponent(()=>import('./xx/Test.vue'))

   const child1Ref = ref(null)
   const state = reactive({
   age: 1,
   name: '2',
   sayHello: null,
   })
   watchEffect(() => {
   // 拿到子组件的一些数据
   console.log(child1Ref.value)
   const obj = toRefs(child1Ref.value)
   console.log(obj.a, obj.b)
   state.name = obj.b
   state.age = obj.a
   state.sayHello = obj.onSayHello
   })

   </script> <template> {{ state.age }} -- {{ state.name }} <button @click="state.sayHello">say hello</button> <Test ref="child1Ref"/> </template>

2. 子组件

   <script setup> import { ref, defineExpose } from 'vue'

   const a = ref(101)
   const b = ref('sddewfewfew')

   const onSayHello = () => {
   console.log('hello')
   }
   defineExpose({
   a,
   b,
   onSayHello,
   })

   </script> <template>

   Child1

   </template>