扩展Vuetify v-dialog组件时value属性失效，如何直接使用value属性？

嘿，我明白你遇到的问题了——扩展VDialog时直接用value prop没效果，得换个自定义的tempValue才行，这确实有点坑。让我帮你理清楚原因，再给你解决办法：

问题根源 #

你看你在FormDialog.vue的模板里写了：

<v-dialog v-bind="$props" :value="tempValue" ... >

这里的问题在于，v-bind="$props"已经把你组件继承自VDialog的所有props（包括value）都绑定到内部的v-dialog上了，但紧接着你又手动绑定了:value="tempValue"，这会覆盖掉$props里的value值。

所以当父组件传:value="true"时，这个值确实传到了FormDialog的value prop里，但内部的v-dialog用的却是你自定义的tempValue（默认是undefined），自然没效果；而当你传:temp-value="true"时，tempValue有了有效值，v-dialog就正常工作了。

解决方案：移除自定义tempValue，直接使用继承的value prop #

只要调整一下你的FormDialog组件，就能直接用value或者v-model了：

1. 修改FormDialog.vue代码

<template>
  <!-- 移除手动绑定的:value="tempValue"，让v-bind="$props"来传递value -->
  <v-dialog 
    v-bind="$props" 
    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,
  // 删掉自定义的tempValue prop，直接继承VDialog的value
  props: {
    // 如果你需要添加其他自定义props，在这里写就行，别碰value
  },
  methods: {
    handleSave() {
      // 处理保存逻辑后，记得触发input事件来更新外部的value（双向绑定需要）
      this.$emit('input', false);
    },
    handleCancel() {
      // 取消时同样触发input事件关闭对话框
      this.$emit('input', false);
    }
  }
}
</script>

2. 父组件中直接使用value或v-model

现在你就可以像用原生VDialog一样使用你的扩展组件了：

<!-- 方式1：手动绑定value和input事件 -->
<FormDialog :value="dialogVisible" @input="dialogVisible = $event" ... ></FormDialog>

<!-- 方式2：更简洁的v-model -->
<FormDialog v-model="dialogVisible" ... ></FormDialog>

额外说明：如果需要在组件内部处理value #

要是你需要对value做一些自定义处理（比如设置默认值），可以用计算属性，而不是自定义prop：

<template>
  <v-dialog 
    v-bind="$props" 
    :value="computedValue" 
    ...
  >
    ...
  </v-dialog>
</template>

<script>
import { VDialog } from 'vuetify/lib'
export default {
  extends: VDialog,
  computed: {
    computedValue() {
      // 给value设置默认值，或者做其他转换
      return this.value !== undefined ? this.value : false;
    }
  },
  methods: {
    // 同样，修改后要触发input事件
    handleCancel() {
      this.$emit('input', false);
    }
  }
}
</script>

这样就能完美解决你直接使用value属性的需求啦～

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