前端页面有时会出现在子组件中修改从父组件传过来的prop的值,如果直接在子组件中修改该prop的值时控制台会报错。该如何在子组件中修改prop的值呢?
一、在父组件中绑定的值加上.sync
//使用子组件
<common :foo.sync="foo"></common>
//data
data(){
return {
foo: true
}
}
二、在子组件中修改数据时用this.$emit('update:foo',newValue)
//标签
<button @click="changeValue">修改prop的值</button>
<div v-if="foo">哈哈哈哈哈</div>
//props
props:{
foo:Boolean,
}
//methods函数
changeValue() {
this.$emit("update:foo",false)
}