如何通过v-bind从父组件打开Vuetify子组件中的Dialog对话框

问题根因 #

• 子组件的showDialog仅在组件初始化时从active_dialog prop取值一次，后续父组件更新active_dialog的值不会同步到子组件的showDialog变量
• Dialog关闭时子组件直接修改本地showDialog变量，没有同步更新父组件的active_dialog状态，会导致父子状态不一致，第二次打开失效

修复方案 #

1. 父组件修改

给active_dialog绑定加上.sync修饰符，支持子组件同步更新父组件值：

<v-col cols="12" md="3" class="text-end">
    <good-dialog 
      v-bind:updateIndex="updateIndex" 
      v-bind:item="item" 
      :active_dialog.sync="active_dialog">
    </good-dialog>
</v-col>
<v-btn
  elevation="0"
  class="mx-2"
  fab
  dark
  small
  color="primary"
  @click="showDialog()"
>
  <v-icon small>fa-edit</v-icon>
</v-btn>

父组件原有js逻辑无需修改。

2. 子组件修改

删除data中定义的showDialog本地变量，改用计算属性绑定prop，值变化时通过事件同步给父组件：

export default {
  props:{
    updateIndex:Number,
    item:Object,
    active_dialog:Boolean
  },
  name: "GoodDialog",
  computed: {
    showDialog: {
      get() {
        return this.active_dialog
      },
      set(val) {
        this.$emit('update:active_dialog', val)
      }
    }
  }
};

子组件模板逻辑无需修改，保持v-model="showDialog"绑定即可。如果不需要使用子组件内置的activator按钮，也可以直接删除activator插槽，完全由父组件控制弹窗显隐。

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