前言：
最近做了购物车模块，对于组件的使用以及组件间的通信进行了摸索。实现了购物车全选、数量选择，总价计算。
总结：
一、由于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); //添加属性
},