Vue3+elementplus实现弹窗功能

父组件：

<el-button
          type="primary"
          icon="Edit"
          circle
          @click="openPrizeDialog"
           style="margin-left: 10px"
/>




  <prizeSetup v-model:prizeVisible="prizeDialogVisible" @getPrizeMsessage="getPrizeMsessage" />




 const prizeDialogVisible = ref(false);
 const openPrizeDialog = () => {
      prizeDialogVisible.value = true;
    };
 const getPrizeMsessage = (params) => {
      console.log('333', params);
    };

子组件：

 <el-dialog title="奖项设置" :model-value="prizeVisible" @close="handleClose" style="width: 90%">

<template #footer>
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSave">保 存</el-button>
 </template>
</el-dialog>





 props: {
    prizeVisible: {
      type: Boolean,
      required: true
    }
  },
  emits: ['update:prizeVisible', 'handleSave', 'getPrizeMsessage'],
    const handleClose = () => {
      emit('update:prizeVisible', false);
    };

    let Category = ref([]);
    const handleSave = () => {
      Category.value = tableData.value.map((item) => {
        return item.Activity_Prize_Category;
      });

      emit('getPrizeMsessage', Category.value);
      emit('update:prizeVisible', false);
    };