为什么 Vuetify v-dialog value 属性在扩展组件时不起作用？

Question

<!-- FormDialog.vue -->
<template>
  <v-dialog
    v-bind="$props"
    :value="tempValue"
    persistent
    @keydown.ctrl.enter="handleSave"
    @keydown.esc="handleCancel"
    @click:outside="handleCancel"
  >
    <v-card>...</v-card>
  </v-dialog>
</template>

<script>
import { VDialog } from 'vuetify/lib'

export default {

  extends: VDialog,

  props: {

    // Direct binding to value prop does not work
    tempValue: undefined
  },

  methods: {
    ...
  }
}
</script>

我正在使用名为

tempValue

的道具绑定到

value

道具，导致直接使用

value

不起作用。

使用

value

（不起作用）

<!-- ChildComponent.vue -->
<FormDialog
  :value="true"
  ...
></FormDialog>

使用

tempValue

（有效）

<FormDialog
  :temp-value="true"
  ...
></FormDialog>

你知道如何直接使用

value

吗？

Answer 1

扩展 Vuetify 组件的正确方法是包装它。

<!-- FormDialog.vue -->
<template>
  <!-- No more $props but $attrs -->
  <v-dialog
    v-bind="$attrs"
    persistent
    @keydown.ctrl.enter="handleSave"
    @keydown.esc="handleCancel"
    @click:outside="handleCancel"
  >
    <v-card>...</v-card>
  </v-dialog>
</template>

<script>
// Do not extend VDialog
export default {
  methods: {
    ...
  }
}
</script>