当前位置：首页 > article >正文

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

article 2025/1/2 4:09:36

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

首页：爱学习的小羊 – 热爱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>