我来帮你排查并修复这个问题，核心问题出在子组件的状态同步逻辑和组件命名匹配上，下面一步步来解决：

先修正父组件的组件命名匹配 #

你父组件里注册的组件是AddUser，但模板里用的是<add-edit-user>，这俩得对应上——Vue组件的PascalCase命名（比如AddEditUser）在模板里要写成kebab-case的<add-edit-user>，所以要么把父组件的components改成：

components: {
  AddEditUser
}

要么把模板里的组件标签改成<add-user>，和注册的AddUser保持一致。

子组件的核心修复（完整示例） #

子组件要正确接收父组件传递的状态，并且遵循Vue单向数据流规则，通过$emit同步关闭状态，不能直接修改prop。下面是完整的子组件代码：

<template lang="pug">
el-dialog(
  title="添加新用户"
  :visible="dialogVisible"
  @close="handleClose"
  width="500px"
)
  // 这里放置你的表单内容，示例用简单输入框
  el-form(label-width="80px")
    el-form-item(label="用户名")
      el-input(v-model="userForm.username")
    el-form-item(label="邮箱")
      el-input(v-model="userForm.email")
  
  // 对话框底部操作按钮
  template(v-slot:footer)
    el-button(@click="handleClose") 取消
    el-button(type="primary" @click="handleSubmit") 提交
</template>

<script>
export default {
  name: 'AddEditUser',
  // 接收父组件传递的对话框显示状态
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  data() {
    return {
      userForm: {
        username: '',
        email: ''
      }
    }
  },
  methods: {
    handleClose() {
      // 触发sync修饰符对应的更新事件，通知父组件关闭对话框
      this.$emit('update:dialogVisible', false)
      // 可选：关闭时重置表单
      this.resetForm()
    },
    handleSubmit() {
      // 这里写表单提交逻辑，比如调用后端接口
      console.log('提交的用户信息:', this.userForm)
      // 提交成功后关闭对话框
      this.$emit('update:dialogVisible', false)
      this.resetForm()
    },
    resetForm() {
      this.userForm = {
        username: '',
        email: ''
      }
    }
  }
}
</script>

关键注意事项 #

• 绝对不能直接在子组件里修改this.dialogVisible，必须通过$emit('update:dialogVisible', false)让父组件更新状态，这是.sync修饰符的工作逻辑
• 子组件的el-dialog要绑定:visible="dialogVisible"，同时监听@close事件（点击对话框右上角叉号时会触发），确保所有关闭场景都能同步父组件状态
• 父组件的.sync修饰符已经自动监听了update:dialogVisible事件，不需要额外写监听代码

这样修改后，你的对话框就能正常和父组件同步显示/隐藏状态了。

内容的提问来源于stack exchange，提问作者Syed