Vue2.0开发之——购物车案例-Footer组件封装(50)

一 概述

• 导入Footer子组件
• 定义fullState计算属性
• 把全选状态传递给Footer子组件
• 实现全选功能

二 导入Footer子组件

2.1 App.vue中导入Footer组件

import Footer from "@/components/Footer/Footer.vue";

2.2 App.vue中注册Footer子组件

components: {Header,Goods,Footer},

2.3 App.vue中使用Footer子组件

<template><div class="app-container"><Header title="购物车案例"></Header><Goodsv-for="item in list":key="item.id":id="item.id":good="item"@state-change="getNewState"></Goods><Footer></Footer></div>
</template>

2.4 效果图

三 定义fullState计算属性

3.1 Footer.vue中全选状态

• 当Goods中的所有商品全部选中时，Footer.vue中的全选按钮才被选中
• 在App.vue中通过计算属性computed，计算Goods中商品按钮的状态

3.2 App.vue中通过计算属性确定Goods商品状态

代码

 //计算属性computed:{//动态计算出全选的状态是true还是falsefullState(){return this.list.every(item=>item.goods_state)}}

App.vue中查看计算属性的值

<p>{{ fullState }}</p>

效果图

四 把全选状态传递给Footer子组件—父向子传值

4.1 Footer子组件中定义全选属性

export default {props:{isFull:{type:Boolean,default:false}}
}

4.2 Footer子组件中使用自定义全选属性

<inputtype="checkbox"class="custom-control-input"id="cbFull":checked="isFull"/>

4.3 App.vue父组件向子组件Footer.vue中传值

<Footer :isFull="fullState"></Footer>

4.4 效果图

五 实现全选功能—自定义事件

5.1 Footer.vue子组件

监听checkbox状态改变事件

<inputtype="checkbox"class="custom-control-input"id="cbFull":checked="isFull"@change="fullChange"/>

发送自定义事件

  methods: {fullChange(e){this.$emit('full-change',e.target.checked)}},

5.2 App.vue-父组件

监听子组件的事件变化

<Footer :isFull="fullState" @full-change="getFullState"></Footer>

实现Goods状态变化

getFullState(val){this.list.forEach(item=>(item.goods_state=val))
}

5.3 效果图