Vue点击按钮传递Props值失败：弹窗无法打开的解决方法

核心问题分析 #

你遇到的问题根源有两个：

1. 子组件把Props赋值给data后，data只会在组件初始化时读取一次Props值，后续父组件更新Props时，子组件的data不会自动同步，导致弹窗状态不更新。
2. Vue的Props是单向数据流，子组件直接修改Props会触发警告，这是框架的规范约束。

正确实现方式 #

方案1：直接用Props绑定Dialog的visible属性 #

不需要在子组件里额外声明data，直接把父组件传递的openModal Props绑定到el-dialog的visible属性上：

父组件代码示例

<template>
  <div>
    <button @click="editMe">打开弹窗</button>
    <ChildDialog :open-modal="openModal" @close="openModal = false" />
  </div>
</template>

<script>
import ChildDialog from './ChildDialog.vue'

export default {
  components: { ChildDialog },
  data() {
    return {
      openModal: false
    }
  },
  methods: {
    editMe() {
      this.openModal = true
    }
  }
}
</script>

子组件代码示例

<template>
  <el-dialog
    title="编辑弹窗"
    :visible.sync="openModal"
    @close="$emit('close')"
  >
    <span>这是弹窗内容</span>
    <template #footer>
      <el-button @click="$emit('close')">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  props: {
    openModal: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleConfirm() {
      // 处理确认逻辑后关闭弹窗
      this.$emit('close')
    }
  }
}
</script>

:visible.sync="openModal"是Element UI的语法糖，等价于:visible="openModal"加上@update:visible="openModal = $event"，本质是通过子组件触发事件让父组件修改Props值，完全符合单向数据流规则。

方案2：用计算属性监听Props（需额外处理状态时） #

如果子组件需要对弹窗状态做额外逻辑处理，可以用计算属性的get和set方法，把状态变化通过事件抛给父组件：

子组件代码示例

<template>
  <el-dialog
    title="编辑弹窗"
    v-model="modalVisible"
  >
    <!-- 弹窗内容 -->
  </el-dialog>
</template>

<script>
export default {
  props: {
    openModal: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    modalVisible: {
      get() {
        return this.openModal
      },
      set(val) {
        this.$emit('update:openModal', val)
      }
    }
  }
}
</script>

父组件使用方式

<ChildDialog :open-modal.sync="openModal" />

这种方式同样遵循单向数据流，子组件不直接修改Props，而是通过$emit通知父组件更新状态。

关键注意点 #

• 永远不要在子组件中直接修改Props，所有Props的更新必须由父组件触发。
• 避免将Props赋值给子组件的data后就不再同步，因为data不会自动响应Props的变化（没必要手动监听Props更新data，直接用Props或计算属性更简洁）。

内容的提问来源于stack exchange，提问作者the man in the pink suit