父组件传值给子组件报错:报错Avoid mutating a prop directly -back

原因

因为在子组件的过程中,对父组件传过来的值进行了赋值操作,破坏了vue的单向数据流传递的,所以报错

改正方法

image.png

两种方式
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;//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
}
}
});