网站建设 简单动态网站建设中央人民政府网
一 概述
- 导入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 效果图
