vue3父子传参控制弹出框

父组件
传参要用v-model

<template>
  <div class="muban">
   <el-button
          type="primary"
          size="small"
          @click.prevent="tipShow"
        >
          tip
        </el-button>
         <MinDialog v-model:dialogVisible="dialogVisible" @close="close"></MinDialog>
 
   </div>
 
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import MinDialog from "./components/minDialog.vue"

export default defineComponent({
  name: "muban",
  components: { MinDialog},
  setup() {
   
      const dialogVisible = ref(false)
      
      function tipShow(){
dialogVisible.value = true
      }
      function close(val:any){
          if(val){
              console.log(val,"submit--close-props")
          }
          dialogVisible.value = false
          console.log( dialogVisible.value,"close-props")
      }
     
        return{
            dialogVisible,
            tipShow,
            close,
        }
  },
});
</script>

<style scoped lang="scss"></style>

子组件
接受参数要用:model-value，要声明调用父组件的方法 emits: [‘close’],

<template>
<!--⚠️注意这里有个大坑，一定要用 model-value，不能用v-model -->
  <el-dialog   :model-value="dialogVisible" title="Tips" width="30%">
    <span>修改{{ dialogVisible }}</span>
    <hr />

    <template #footer>
      <span class="dialog-footer">
        <el-button
          @click="
           cancel
          "
          >Cancel</el-button
        >
        <el-button type="primary" @click="submit">Confirm</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, ref, defineProps,  } from "vue";
import { ElMessageBox } from "element-plus";

export default defineComponent({
  name: "MinDialog",
  emits: ['close'],//一定要声明
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {

    function submit() {
      console.log("submit",)
      emit("close", "submit-props");
    }
   function cancel(){
 console.log("cance-props",)
      emit("close" );
    }

    return {
      submit,
      cancel
  
    };
  },
});
</script>