需求:
有四件商品信息存在父组件里面,需要传给子组件,在子组件渲染,子组件有增加数量和减少数量的按钮,点击按钮,对应商品的数量和价格(不是单价)会改变,父组件里面的四件商品的总价也会更改。
思路:
把父组件的商品信息传给子组件,子组件接收后渲染到页面上,由于商品信息的样式是一样的,可以用v-for 循环商品信息;再给两个按钮绑定点击事件,控制数量的更改和价格的更改。再用计算属性计算出四种商品的总价,在update钩子函数里面使用this.$emit传值给父组件,父组件接收用自定义事件,再渲染到页面上。方法有很多种,样式也随意发挥,大家都可以尝试。
代码:
父组件代码:
<template> <div> <div class="mainBoxs"> <Goods :info="goodsInfo" @zj="zongjia"></Goods> <div class="total">总价:{ {total}}</div> </div> </div> </template> <script> import Goods from "./components/Goods.vue" export default { dat