子-父；父-子组件

 

父传子，子组件是<counter></counter>

 

 

 父组件传给子组件数据（要实现的功能是：父组件勾选框全部选中后，子组件勾选框就会改变，勾选中）

1.先在父组件中引入注册子组件<footer></footer>

2.父组件单选框全部选中，子组件单选框就会勾选，-----父组件数据变化来影响子组件，用到计算属性computed：{  } ------computed：{  fullstate（）{  }   }    fullstate动态计算全选状态为true/false

3.在子组件中定义，通过props传数据，props{    isfull { type:   }     }   -----子组件里面找到属性的复选框，属性值为   ：=“ isfull ”

4.父组件中<footer  : isfull ="fullstate"></footer>

 子组件传给父组件数据（子组件勾选后，父组件所有单选框全部勾选中）

1.自定义事件  监听单选框@change="  ",  @change="  " 是与@click一样的自带的属性，专用来监听发生改变的事件

在menthods定义函数fullchange( e ){ this.$emit(   ' full-change ' ,  要传的属性值  e.  )   }

2.父组件中，用子组件绑定拿到最新的数据 <footer   @ full-change =‘  ’></footer>

3.进行foreach循环

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。

语法 ：array.forEach(function(currentValue, index, arr), thisValue)

currentValue必需，当前元素。index可选，当前元素的索引值。arr可选，当前元素所属的数组对象。

thisValue

可选。传递给函数的值一般用 "this" 值。 如果这个参数为空， "undefined" 会传递给 "this" 值

 

代码规范：先指令----属性绑定（： =“ ” ）----绑定事件（@）

在一个组件中，不要同时在相同的节点用同用同一个属性如 created(){   } ;methods:{    }

 

在购物车数组中，已经勾选的水果，总价累加起来

let amt=0
//把已经勾选的fiter过滤出来，结果是true
方法一
arr.filter(item=>item.state).forEach(item=>{amt+=item.price*item.count})
方法二
//arr.filter(item=>item.state).reduce((累加的结果，当前循环项)=>{},初始值)

const result =arr.filter(item=>item.state).reduce((amt,item)=>{return amt+=item.price*item.count},0)