vue3 父子组件通信、调用子组件方法

//一、父组件调用子组件
<script setup lang=ts>
let detailData = ref()
Api.editExecuteNo(params).then((res: any) => {
    detailData.value= res
  })

//2.调用子组件方法
const add = () {
   childComp.value.addNext
}
</script>
<template>
<DetailDocumentVue
        v-if="openDetail"
        ref="childComp"
        :dataform="detailData"
        :from="'slsh'"
        @finsh-zjh="finshZjh"
      />
</template>

//二、子组件
<script setup lang=ts>
//1、接收父组件的值
const props = defineProps({
  dataform: {
    type: Object,
    require: false
  },
  from: {
    type: String,
    require: false
  }
})
// const formAll = computed(() => props.formAll ) //改变传过来的值的时候使用
const formAll = toRef(props, 'dataform')//toRef 确保响应式可影响界面变化
const from= toRef(props, 'from')
watch(formAll, () => {                 //监听异步传值 确保响应式
  basicInformation.value = formAll.value?.basicInformation
},
  { immediate: true }
)

//2、发射给父组件的值
const emit = defineEmits(['finshZjh'])
//操作完成
emit('finshZjh')
//3、暴露自身的方法和属性给父组件
defineExpose({
  addNext,
})
const addNext = ()=>{

}
</script>