一、子组件 dialog文件
<template>
<div>
<el-dialog v-model="visible" width="50%" top="15vh">
<div>
<div>Content</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleCancel">取消</el-button>
<el-button @click="handleConfirm">确认</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
import { ref } from 'vue'
const emits = defineEmits(['confirm'])
let visible = ref(false)
const openDialog = (data) => {
visible.value = true
console.log('data:', data)
}
const handleConfirm = () => {
emits('confirm', '我是传给父组件的数据222')
visible.value = false
}
const handleCancel = () => {
visible.value = false
}
defineExpose({
openDialog
})
标题二、父组件(使用Dialog)
<DialogView ref="dialogRef" @confirm="handleOnConfirm"></DialogView>
import { ref } from 'vue'
import DialogView from './DialogView .vue'
let dialogRef = ref()
const openDialog = () => {
dialogRef.value.openDialog({ data: { name: '小白很白' } })
}
const handleOnConfirm = (data) => {
console.log('data', data)
}