Vue.js中使用v-model指令绑定到一个prop上,但Vue不允许这样做,因为prop是单向数据流,即父组件传递给子组件的数据,子组件不应该修改它。v-model本质上是v-bind和v-on:input的语法糖,用于创建双向数据绑定,它需要绑定的数据是可写的。因此,当尝试将v-model用于prop时,Vue会抛出警告,提示prop绑定不是可写的。

为了解决这个问题,通常有几种方法:

  1. 使用.sync修饰符:在Vue 2.x中,.sync修饰符可以作为一个替代方案,它允许子组件触发一个更新父组件绑定值的更新事件。但请注意,Vue 3.x已经移除了.sync修饰符作为v-model的默认行为,而是将其作为一个可选的功能,需要通过v-model:xxx显式使用。

  2. 在子组件中定义一个本地data属性:子组件可以接收prop作为初始值,然后定义一个本地的data属性来存储这个值。这样,v-model就可以绑定到这个本地data属性上,而不会违反prop的单向数据流原则。当需要更新值时,子组件可以触发一个自定义事件来通知父组件更新prop值(如果需要的话)。

  3. 使用v-bind进行单向绑定:如果不需要双向绑定,可以直接使用v-bind进行单向绑定。

<a-range-picker  :value="initValue" format="YYYY-MM-DD HH:mm"   />
<script setup>
    const props = defineProps({
        initValue: {
            type: Array,
            default: () => {
              return ['', '']
            }
        }
    })
</script>

更多推荐