【前端】Vue3 父传子 Dialog 显示问题：解决方案与最佳实践

💥 欢迎来到[爱学习的小羊]的博客！希望你能在这里发现有趣的内容和丰富的知识。同时，期待你分享自己的观点和见解，让我们一起开启精彩的交流旅程！🌟>

• 首页：爱学习的小羊 – 热爱AI、热爱Python的天选打工人，活到老学到老！！！

• 导航
  - 常用开发工具：包含 代码补全工具, Vscode-AI工具, IDER or Pycharm-AI工具, 获取OpenAIAPIKey的多种方式等更多教程…
  - VScode-AI插件：集成13个种AI模型（GPT4、o1等）、支持Open API调用、自定义助手、文件上传等 >>> - CodeMoss & ChatGPT-AI中文版

• 💥 期待与你一起学习前端知识、共同成长🌟

一、问题背景

在开发过程中，我们经常需要在父组件中控制子组件的显示与隐藏。例如，当用户点击某个按钮时，弹出一个配置对话框（Dialog），让用户进行设置。在这个过程中，父组件需要将 Dialog 的显示状态传递给子组件，而子组件则需要根据这个状态来决定是否显示 Dialog。

二、代码解析

我们以一个简单的 KeyPairDialog.vue 组件为例，来分析如何实现这个功能。以下是子组件的代码：

<template>
  <div>
    <el-dialog
      v-model="visable"
      title="Key Pair"
      width="500px"
      @close="handleClose"
    >
      <div>
        <p>Key Pair Configuration</p>
      </div>
      <template #footer>
        <el-button @click="handleClose">Cancel</el-button>
        <el-button type="primary" @click="handleSave">Save</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, watchEffect } from 'vue'

// 通过 props 接收父组件传来的
const props = defineProps({
  dialogVisible: Boolean
});

let visable = ref(false)

console.log("dialogVisible", props.dialogVisible);

watchEffect(() => {
  visable.value = props.dialogVisible
})

// 通过 emit 向父组件发送事件来更新
const emit = defineEmits(['update:modelValue'])

// 关闭弹框的函数
const handleClose = () => {
  emit('close', false)
}

// 保存操作并关闭弹框
const handleSave = () => {
  // 保存逻辑
  emit('update:modelValue', false)
}
</script>

<style scoped>
/* 可以在这里定义样式 */
</style>

1. 组件结构

在这个组件中，我们使用了 el-dialog 组件来实现弹出对话框。通过 v-model 指令，我们可以将 visable 变量与 Dialog 的显示状态绑定。这里的 visable 变量是一个响应式引用（ref），它的值会根据父组件传递的 dialogVisible 属性进行更新。

2. 监听父组件的属性

我们使用 watchEffect 来监听 props.dialogVisible 的变化。当父组件的 dialogVisible 属性发生变化时，visable 的值也会随之更新，从而控制 Dialog 的显示与隐藏。

3. 事件的传递

在关闭 Dialog 时，我们调用 handleClose 函数，通过 emit 向父组件发送一个事件，通知父组件 Dialog 已关闭。同时，在保存操作时，我们也会通过 emit 发送一个事件，告知父组件更新 Dialog 的状态。

三、父组件的实现

为了让这个 Dialog 正常工作，我们还需要在父组件中进行相应的实现。以下是一个简单的父组件示例：

<template>
  <div>
    <el-button @click="showDialog">Open Key Pair Dialog</el-button>
    <KeyPairDialog
      :dialogVisible="dialogVisible"
      @close="dialogVisible = false"
      @update:modelValue="dialogVisible = false"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import KeyPairDialog from './KeyPairDialog.vue'

const dialogVisible = ref(false)

const showDialog = () => {
  dialogVisible.value = true
}
</script>

<style scoped>
/* 可以在这里定义样式 */
</style>

1. 控制 Dialog 的显示

在父组件中，我们定义了一个 dialogVisible 变量，用于控制 Dialog 的显示状态。当用户点击按钮时，调用 showDialog 函数，将 dialogVisible 设置为 true，从而打开 Dialog。

2. 事件处理

在子组件 KeyPairDialog 中，我们通过 @close 和 @update:modelValue 监听子组件发出的事件，并在事件触发时将 dialogVisible 设置为 false，从而关闭 Dialog。

总结

在 Vue3 中实现父子组件之间的 Dialog 显示控制并不复杂，只需合理使用 Props 和 Emit 机制，确保状态的一致性即可。