vue子组件与父组件通讯

说明

因为购物车的细节比较多，但是实现方法又何前面类似，只是繁琐了一些，因此我就不再一一记录，只记录一些相关的知识点。

知识点

this.$emit(“method”)

先把场景搭建好：有两个vue组件，分别为CartItem.vue和Cart.vue，其中CartItem是子组件，Cart是CartItem的父组件。

1. 组件关系声明：
   那代码怎么说明这个关系呢？就是在父组件Cart中的components部分声明：

components:{
   CartItem,
}

2. 子组件发起通讯请求：
   子组件的script中使用this.$emit(“method”)来发起动作请求，其中method被绑定到父组件中：

this.$emit("change_select")

3. 父组件接受动作请求，并调用对应方法：
   在父组件template中，会用@来修饰这个change_select，并绑定对应的方法，当子组件发出请求时，父组件就执行：

<CartItem :key="key" v-for="(course,key) in course_list" @change_select="calc_total" :course="course"></CartItem>

//script中：
calc_total(){
  let total = 0;
  this.course_list.forEach((course,key)=>{
    if(course.selected){
      total += parseFloat( course.price );
    }
  });
  this.total_price = total;
}

以上三个步骤便完成了子组件与父组件的通讯过程。

TIPS

值得注意的是这段代码：

<CartItem :key="key" v-for="(course,key) in course_list" @change_select="calc_total" :course="course"></CartItem>

里面的:course="course"，这里是将Cart组件里面的course属性，以“course”的名字传到子组件中去，这样，子组件就能够使用父组件的数据了。子组件使用props来接收这个属性，且props是子组件访问父组件数据的唯一接口，且props是单向数据绑定，即数据流为父组件到子组件。子组件具体代码如下：

<script>
export default {
	...
	props:["course"],
	...
}

forEach

javascript中循环遍历数组的方法