使用v-slot:activator时如何在自定义组件中关闭Vuetify v-dialog

根因说明 #

你封装的DeleteDialog组件遵循Vue默认的v-model约定（入参为value属性，通过触发input事件更新值），但调用组件时没有绑定v-model变量，导致内部emit的input事件没有被父组件接收处理，value属性的值不会更新，弹窗自然无法关闭。

修正步骤 #

1. 调整父组件调用逻辑 #

给DeleteDialog加上v-model绑定一个布尔类型的响应式变量即可：

<template>
  <div>
    <DeleteDialog v-model="showDeleteDialog">
      <template v-slot:activator="{on, attrs}">
        <v-btn v-on="on" v-bind="attrs">
          Show dialog
        </v-btn>
      </template>
      Are you sure you want to delete this user?
    </DeleteDialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 控制弹窗显隐的变量
      showDeleteDialog: false
    }
  }
}
</script>

2. 子组件可选优化 #

如果希望组件无需外部绑定v-model也能正常开关，可以在子组件内部维护本地状态同步属性值，适配更多使用场景：

<template>
  <v-dialog :value="dialogVisible" @input="handleInput" width="550">
    <template v-slot:activator="{ on, attrs }">
      <slot
          name="activator"
          v-bind:on="on"
          v-bind:attrs="attrs"></slot>
    </template>

    <v-btn @click="closeDialog">
      Close
    </v-btn>

  </v-dialog>
</template>

<script>
export default {
  props: {
    value: Boolean,
  },
  data() {
    return {
      dialogVisible: this.value
    }
  },
  watch: {
    // 监听外部属性变化同步本地状态
    value(newVal) {
      this.dialogVisible = newVal
    }
  },
  methods: {
    handleInput(val) {
      this.dialogVisible = val
      this.$emit('input', val)
    },
    closeDialog() {
      this.handleInput(false)
    },
  },
}
</script>

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