Vue父组件更新子组件属性失败：点击按钮对话框无法打开

你当前的代码无法正常打开对话框的核心原因是：子组件的openDialog仅在组件初始化时从open props获取初始值，之后父组件的openCreateDialog状态更新时，子组件的openDialog不会自动同步这个变化——Vue的data属性不会主动追踪props的后续变更。

这里提供两种可靠的修复方式：

方案一：通过watch监听props变化更新状态 #

在子组件中添加watch监听器，当open props的值发生变化时，同步更新openDialog：

export default Vue.extend({
  name: "CreateReservationDialog",
  props: {
    open: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      openDialog: this.open,
    }
  },
  // 添加watch监听
  watch: {
    open(newOpenValue) {
      this.openDialog = newOpenValue;
    }
  }
});

方案二：使用.sync修饰符实现双向绑定（推荐） #

这种方式更符合Vue的组件通信规范，避免手动维护状态同步：

1. 修改父组件模板，给props添加.sync修饰符：

<v-btn
 color="primary"
 elevation="5"
 @click="openCreateDialog = true"
 small
>
 <v-icon left>
   mdi-plus
 </v-icon>
  Create
</v-btn>
<!-- 添加.sync修饰符 -->
<create-reservation-dialog :open.sync="openCreateDialog" />

2. 修改子组件，用计算属性封装open props，实现v-model的双向绑定：
   子组件模板：

<v-dialog v-model="dialogOpen" width="300">
  <span>Opened</span>
</v-dialog>

子组件JS：

export default Vue.extend({
  name: "CreateReservationDialog",
  props: {
    open: {
      type: Boolean,
      required: true,
    },
  },
  computed: {
    dialogOpen: {
      get() {
        // 从props获取当前状态
        return this.open;
      },
      set(newValue) {
        // 当对话框关闭时，向父组件发送更新事件
        this.$emit('update:open', newValue);
      }
    }
  }
});

方案二的优势在于：当用户手动关闭对话框时，子组件会自动向父组件发送update:open事件，同步更新父组件的openCreateDialog状态，避免出现状态不一致的问题。

内容的提问来源于stack exchange，提问作者Adam Šulc