Vue3 父组件控制子组件el-dialog对话框

父组件：通过prop传参

<template>
  <el-button type="primary" @click="showAddServerDialog = true">
    新增服务器
  </el-button>
  <!-- 子组件 -->
  <AddServer :show="showAddServerDialog" @set-show="setShow" />
</template>

<script setup>
import AddServer from "./components/AddServer.vue"; //子组件
import { ref } from "vue";

let showAddServerDialog = ref(false);

// 处理子组件传回的参数
function setShow(val) {
  showAddServerDialog.value = val;
}

</script>

子组件：通过emits向子组件传参

注：该警告解决办法为将 v-model="props.show" 改为 :model-value="props.show"

<!-- AddServer.vue -->
<template>
  <div>
    <el-dialog
      :model-value="props.show"
      title="Tips"
      width="30%"
      :before-close="handleClose"
    >
      <span>This is a message</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">Cancel</el-button>
          <el-button type="primary"> Confirm </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>

const props = defineProps({
  show: Boolean,
});

const emits = defineEmits(["set-show"]);

function handleClose() {
  //关闭对话框时并向子组件传参
  emits("set-show", false);
}
</script>