vue+typescript 子组件向父组件传递数据

今天遇到一个需求，就是子组件中数据查询之后，需要将该数据返回给父组件。

使用<script setup>+defineEmits可以实现该功能

子组件：

<script setup>
const state = reactive({
    //这里根据实际需求来
    ownData: [] as Array<OwnData>,
});
   //defineEmits中使用数组定义传递事件Key
   const emits = defineEmits(['back-data']);
    //因为我的需求是初始化之后，就传递，所以放在了onMounted中
    //实际使用看具体需求
   onMounted(() => {
    initTreeData()
    .then(()=>{//初始化完成之后，向父组件传递组织数据
        emits('back-data',state.ownData)
    });    
});
</script>

父组件

//父组件在引用子组件时，需要定义好事件，这里的@back-data要与子组件中defineEmits定义的一致
<Child ref="childRef" @back-data="backData" />
<script>
const state = reactive({
    //这里根据实际需求来
    ownData: [] as Array<OwnData>,
});
//获取子组件传递的数据
const backData=(data:any)=>{
  state.ownData=data
}
</script>

因为是前端小白，所以记录一下，有错误的地方，还请指出。