子組件調用父組件方法

<template>
  <div>
    <p> This is Father</p>
    <ElDialog>
      <SelectDialog
        @closeDialog="closeDialog"
        @addData="addData"
      />
    </ElDialog>
  </div>
</template>
<script lang="ts" setup>

function closeDialog(){
    console.log(' this is close')
}
function addData(data:any){
    console.log(' this is add data ',data)
}
</script>

<template>
  <div>
    <p> This is Son</p>
    <ElButton class="ml-2" @click="backClick">OnBack</ElButton>
  </div>
</template>

<script lang="ts" setup>
const emit = defineEmits<{
  (event: 'closeDialog'): void,
  (event: 'addData',data:any): void,
}>()

function backClick(){
   emit("closeDialog")
   emit("addModuleData", "this.test")
}

</script>

子組件修改父組件的值

<template>
  <div>
    <p> This is Father</p>
    <HistoryDialog
      :key="uuid"
      v-model:showHistory="pageData.params.showHistory" />
  </div>
</template>

<template>
  <div>
    <p> This is Son</p>
    <ElButton class="ml-2" @click="closeDialog">Close</ElButton>
  </div>
</template>

<script lang="ts" setup>
  const emit = defineEmits<{(event: 'update:showHistory'): void}>()
    
  function closeDialog(){
    emit("update:showHistory",false)
  }
</script>