文章参考

无

问题描述

1. 在工作中写了一个购物车，当用户点击商品数量按钮（增加或者减少）的时候，就会自动计算出总价的变化。
2. 总价是使用computed计算出来的
3. 总价在在子组件中计算的，只能通过this.$emit(‘自定义事件’)的方式将子组件的总价数据传递给父组件
4. 需要在计算总价的时候触发$emit() 或者 监听总价数据变化的时候触发 $emit事件

案例描述

export default {
    data: function () {
        return {
            // 选择容量的标识，对应的样式 会呈现高亮
            volumeNum: 1,
            ageType: 1,
            // 商品数量
            goodsNum: 0,
            price: 100,
        }
    },
    mounted: function () {
        this.goodsNum = 1;
    },
    methods:{
        selectVolume: function (num) {
            this.volumeNum = num;
        },
		// 减少商品的数量
        minusGoodsNum: function () {
            if (this.goodsNum <= 1) {
                return false;
            }
            this.goodsNum = this.goodsNum - 1;
        },
		// 增加商品的数量
        addGoodsNum: function () {
            this.goodsNum = this.goodsNum + 1;
        }
    },
    computed: {
        // 根据单价和数量计算出总价
        total: function () {
			var totalPrice = this.goodsNum * this.price;
			// 计算总价的时候向父组件传递数据
			// this.$emit('totalNumChange', totalPrice);
            return totalPrice;
        }
    },
    watch: {
		// 监听computed中的属性
        total: function (newValue, oldValue) {
            this.$emit('totalNumChange', newValue)
        },
    }
};