v-model cannot be used on a prop, because local prop bindings are not writable. Use a v-bind binding
·
Vue.js中使用v-model指令绑定到一个prop上,但Vue不允许这样做,因为prop是单向数据流,即父组件传递给子组件的数据,子组件不应该修改它。v-model本质上是v-bind和v-on:input的语法糖,用于创建双向数据绑定,它需要绑定的数据是可写的。因此,当尝试将v-model用于prop时,Vue会抛出警告,提示prop绑定不是可写的。
为了解决这个问题,通常有几种方法:
-
使用
.sync修饰符:在Vue 2.x中,.sync修饰符可以作为一个替代方案,它允许子组件触发一个更新父组件绑定值的更新事件。但请注意,Vue 3.x已经移除了.sync修饰符作为v-model的默认行为,而是将其作为一个可选的功能,需要通过v-model:xxx显式使用。 -
在子组件中定义一个本地data属性:子组件可以接收prop作为初始值,然后定义一个本地的data属性来存储这个值。这样,
v-model就可以绑定到这个本地data属性上,而不会违反prop的单向数据流原则。当需要更新值时,子组件可以触发一个自定义事件来通知父组件更新prop值(如果需要的话)。 -
使用
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>
更多推荐


所有评论(0)