vue3中实现el-dialog弹窗

1. vue3中的父子组件传递依然和vue2中的一样使用props和emit, 但是写法略有不同；
2. emit(自定义事件)-子传父；
3. props-父传子：
   父组件中:

<template>
  <div>
     <el-button @click="toTonfigure">配置</el-button>
     <efficacy-dialog
        v-if="dialogVisible"
        :dialogVisible="dialogVisible"
        @close="closeDialog"  />
        
  </div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, toRefs, reactive } from 'vue'
import efficacyDialog from './efficacyDialog.vue'

export default defineComponent({
    name: 'EfficacyEvaluation',
    components: {
      efficacyDialog
    },
    setup() {
        const { proxy } = getCurrentInstance() as any
        const state:any = reactive({
          dialogVisible: false
        })
        const states = toRefs(state);
        
        function toTonfigure() {
          proxy.dialogVisible = true
        }

        function closeDialog() {
          proxy.dialogVisible = false
        }
        

        return {
          ...states,
          toTonfigure,
          closeDialog
        }

    }

})


</script>

子组件中:

<template>
  <el-dialog
    title="疗效评估类型"
    :model-value="dialogVisible"
    :close-on-click-modal="false"
    width="50%"
    :before-close="handleClose">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
      <el-form-item label="疗效评估类型" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择">
          <el-option label="评估记录" value="record"></el-option>
          <el-option label="评估结果" value="result"></el-option>
          <el-option label="评估报告" value="report"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, toRefs, reactive } from 'vue'

export default defineComponent({
    name: 'EfficacyDialog',
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      }
    },
    emits: ['close'],
    setup(props, { emit }) {
        const { proxy } = getCurrentInstance() as any
        const state:any = reactive({
          ruleForm: {
            region: ''
          },
          rules: {
            region: [
              { required: true, message: '请选择疗效评估类型', trigger: 'change' }
            ]
          }
        })
        const states = toRefs(state);
        
        function save() {
          
          handleClose()
        }

        function handleClose() {
          emit('close', false)
        }
        return {
          ...states,
          handleClose,
          save
        }
    }
})
</script>