vue 组件间的通信

前言：最近做了购物车模块，对于组件的使用以及组件间的通信进行了摸索。实现了购物车全选、数量选择，总价计算。
总结：一、由于vue遵循单项数据流，因此子组件是不允许修改父组件的属性，有可能报错如下：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "result" (found in component )解决方法：1. 父组件：<carTemplate name="carTemplate" v-bind:carItem="carItem" v-bind:carIndex="index" v-bind:carInfo="carInfo" v-on:carMethod="carChange($event)"></carTemplate>methods: { carChange(msg){ //获取子组件传过来的数据 this.carInfo = msg; } }
子组件：<img src='/static/assets/icon/chooseGreen.png' class='icon-choose' @click='chooseAll()' v-if='all'>methods: { chooseAll () { this.copyAll = !this.all; this.$emit('allChoosed', this.copyAll); //将数据传给父组件 } }
2.这种方法我没有试过Vue 2.3.0已回归sync修饰符。子组件想要更改父组件传入的属性，必须显式的update那个值：this.$emit('update: AttrFromParent', someVal)；
二、对象不能简单被watch监听，必须深度watch: { carInfo:{ handler (newValue){ var allCar = 0; var all = false; var allPrice = 0; for (var i = 0; i < newValue.length; i++) { if (newValue[i].checked==true){ allCar++; allPrice = newValue[i].price *newValue[i].num +allPrice; } } if (allCar == newValue.length) { all = true; } this.all = all; this.allPrice = allPrice; }, deep: true //深度 } },
三、改变子组件中从父组件获取的数据，如果是对象或者数组。注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。
四、Vue 不能检测到对象属性的添加或删除。Vue不能直接在对象上添加或删除属性，必须使用Vue.set(Object,key,value)这种方式来添加属性chooseGood () { var carItem = this.carItem; var checked = this.carItem.checked?false:true; this.$set(this.carItem,'checked', checked); //添加属性 },