**
vue3 setup 中的 emit事件触发
**
父组件
<template>
<PaymentDlg ref="paymentDlg" @onSaveOk="paymentTest" />
</template>
<script setup>
import PaymentDlg from './dashboards/payment-dlg.vue'
import { ref } from "vue";
const paymentDlg = ref(null)
const paymentTest = (content) => {
console.log(content)
}
</script>
子组件
<template>
<el-dialog v-model="visible" :title="$t('confirmReceipt')" width="30%" :before-close="close" >
<span>This is a message</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="close">{{$t('btnCancel')}}</el-button>
<el-button type="primary" @click="onOk">{{$t('btnOk')}}</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import { ref, defineEmits, defineExpose } from 'vue'
import { isEmpty } from '@/utils/common.js'
const emit = defineEmits(['on-save-ok'])
// dlg 展示控制器
let visible = ref(false)
let receivable = ref(0)
let officialReceipts = ref(0)
const show = (money) => {
visible.value = true
if (!isEmpty(money)) {
receivable.value = money
officialReceipts.value = money
}
}
const onOk = () => {
// 触发事件
emit('on-save-ok', '1111')
close()
}
const close = () => {
visible.value = false
receivable.value = 0
officialReceipts.value = 0
}
defineExpose({
show
})
</script>