vue3+Ts emit组件传值

实现效果：点击按钮-->打开弹窗-->关闭弹窗，将弹窗中的值传回

 

 主页面：

<template>
  <div  style="padding: 2%">
    <el-button type="primary" @click="open" size="small">按钮</el-button>
    <div>名字：{{ name }}</div>
    <div>年龄：{{ age }}</div>
    <add-or-update ref="dialogRef" @my-name=myName @my-age=myAge></add-or-update>
  </div>
</template>

<script setup lang="ts">

import AddOrUpdate from "./add-or-update.vue";
import { ref } from "vue";
let dialogRef = ref()
let name = ref('')
let age = ref('')
const myName = (val:any) => {
  name.value = val
}
const myAge = (val:any) => {
  age.value = val
}
const open = () => {
  dialogRef.value.init()
}

</script>

 弹框：

<template>
	<el-dialog v-model="visible" title="111" :close-on-click-modal="false">
    <div>名字： {{ myName }}</div>
    <div>年龄： {{ myAge }}</div>
    <template #footer>
			<el-button type="primary" @click="closeHandle()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
const emit = defineEmits({})
const visible = ref(false)
const myName = ref<any>('尽快咯')
const myAge = ref<any>(23)
const closeHandle = () => {
  emit('my-name', myName)
  emit('my-age', myAge)
	visible.value = false
}
const init = () => {
  visible.value = true
}
defineExpose({
	init
})
</script>