vue3 setup 中的 emit事件触发

**

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>