vue父组件传值子组件报错Avoid mutating a prop directly解决
作者：苏本的书柜
这篇文章主要为大家介绍了vue父组件传值子组件报错Avoid mutating a prop directly解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
原因
因为在子组件的过程中,对父组件传过来的值进行了赋值操作,破坏了vue的单向数据流传递的,所以报错
改正方法
两种方式
- 1. 用 $emit(‘update:xxx’) 改变。这种方式并没有改变单向数据流的特性
- 2. 将prop定义为对象，改变对象中的值不会触发报错，页面也能正常渲染、更新。但是如果你对数据流不是门清，还是别这么做了。,也就是传入一个对象,然后改变对象,这样不会报错.
props实现双向数据流的一个方式
Vue.component("switchbtn", {
template: "<div @click='change'>{{myResult?'开':'关'}}</div>",
props: ["result"],
data: function () {
return {
myResult: this.result//①创建props属性result的副本--myResult
};
},
watch: {
result(val) {
this.myResult = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
},
myResult(val){
//xxcanghai 小小沧海 博客园
this.$emit("on-result-change",val);//③组件内对myResult变更后向外部发送事件通知
}
},
methods: {
change() {
this.myResult = !this.myResult;
}
}
});
new Vue({
el: "#app",
data: {
result: true
},
methods: {
change() {
this.result = !this.result;
},
onResultChange(val){
this.result=val;//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
}
}
});以上就是vue父组件传值子组件报错Avoid mutating a prop directly 解决的详细内容，更多关于vue父子组件传值报错解决的资料请关注脚本之家其它相关文章！