vue3 传参报错 Unexpected mutation of “value“ prop
问题原因value是我定义的props,而vue是不允许子组件改变父组件传来的参数值的,自然不能放在v-model里了,不然就被表单乱改值。解决方法为了让父组件能在子组件里创建双向数据绑定,我们应该自定义一个v-model,而不是传递props子组件<template><div style="text-align: center"><input v-model="va
·
问题原因
value是我定义的props,而vue是不允许子组件改变父组件传来的参数值的,自然不能放在v-model里了,不然就被表单乱改值。
解决方法
为了让父组件能在子组件里创建双向数据绑定,我们应该自定义一个v-model,而不是传递props
子组件
<template>
<div style="text-align: center">
<input v-model="value" placeholder="edit me" />
</div>
</template>
<script>
export default {
name: "Child",
props: {
modelValue: Array,
},
computed: {
value: {
get() {
return this.modelValue
},
set(value) {
this.$emit('update:modelValue', value)
}
}
}
}
</script>
<style scoped>
</style>
父组件
<template>
<Child v-model="pValue"></Child>
</template>
<script>
import Child from "@/components/Child";
export default {
name: "Parent",
components: {Child},
data() {
return {
pValue: '11'
}
}
}
</script>
<style scoped>
</style>
更多推荐
已为社区贡献3条内容
所有评论(0)