如何让自定义组件的v-model:selected可选且保留默认值的响应式？

嘿，我完全懂你遇到的困扰！封装Vuetify的VDataTable时，想把它的行选择功能通过v-model:selected暴露出去，可一旦父组件没绑定这个v-model，组件的响应式就崩了——比如单选还行，全选直接失效对吧？其实核心就是要让组件在“父组件传值”和“自己维护状态”两种模式下都能正常工作，和原生VDataTable的逻辑对齐就行。

给你一步步拆解解决方案：

1. 先给props设置正确的默认值 #

首先，你的selected prop不能直接把默认值写成[]（数组是引用类型，会导致所有组件实例共享同一个数组），得用工厂函数返回新数组：

props: {
  selected: {
    type: Array,
    // 工厂函数返回独立的空数组，避免实例间状态污染
    default: () => []
  }
}

2. 区分外部传值和内部维护状态 #

我们需要一个内部的响应式变量来兜底，当父组件没传selected时，就让VDataTable用这个内部状态；如果父组件传了，就同步父组件的props并触发更新。代码如下：

import { ref, computed } from 'vue';

const internalSelected = ref([]);
// 判断父组件是否主动传入了selected prop
const isSelectedProvided = computed(() => props.hasOwnProperty('selected'));

// 桥接外部props和内部状态的computed
const tableSelected = computed({
  get() {
    // 外部传了就用props的值，否则用内部状态
    return isSelectedProvided.value ? props.selected : internalSelected.value;
  },
  set(value) {
    if (isSelectedProvided.value) {
      // 外部传了值，就触发emit通知父组件更新
      emit('update:selected', value);
    } else {
      // 没传值，直接更新内部维护的状态
      internalSelected.value = value;
    }
  }
});

3. 绑定到VDataTable上 #

最后把这个tableSelected绑定到VDataTable的v-model即可：

<VDataTable 
  v-model="tableSelected"
  // 其他配置项...
/>

为什么这样能解决问题？ #

原生VDataTable内部就是这么实现的：当外部没给v-model时，它自己在内部维护一个响应式的选中状态；当外部传了v-model，就完全同步外部的状态。你之前的写法只处理了外部传值的情况，没考虑兜底的内部状态，所以没传v-model时就失去了响应式支撑，全选这类依赖状态变化的功能自然就失效了。

备注：内容来源于stack exchange，提问作者veodko