vue3 给自定义组件绑定属性的时候报：Unexpected mutation of “modelValue“ prop，我们可以通过computed计算属性来解决

1、先上个图：

自定义了一个日期组件，里面用了一个属性：

const props = defineProps({
    modelValue: {
      type: String,
      default: '',
    },
    isEnabled: {
      type: Boolean,
      default: false,
    },
  });

这样子的话，外面调用这个组件的时候，就可以直接传modelValue来传值了，然后自定义组件并没有写完就报个错，这个很明显用法是错的。

2、那么我们应该如何处理呢，下面是方法：

const dateModelValue = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val),
  });

我们用一个计算属性去引用这个属性就可以了。

3、正确的写法：

<template>
  <DatePicker
    v-model:value="dateModelValue"
    placeholder="选择日期"
    enter-button
    allowClear
    readonly
    style="width: 100%"
    dropdownClassName="lua-date-picker-custom"
    @change="onPanelChange"
    :disabled="isEnabled"
    :show-today="false"
    :open="isOpen"
    @open-change="handleOpenChange"
    @panel-change="handlePanelChange"
  >
...
</DatePicker>
</template>

const isOpen = ref(false);

  const emit = defineEmits(['update:modelValue']);

  // Unexpected mutation of "modelValue" prop
  const dateModelValue = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val),
  });
  const props = defineProps({
    modelValue: {
      type: String,
      default: '',
    },
    isEnabled: {
      type: Boolean,
      default: false,
    },
  });

4、ai给出的原因：

v-model 是一个指令，用于创建双向数据绑定， v-model:value 期望的是一个可以修改的属性。

所以我们得用computed进行修饰下，让其可以进行双向数据绑定。