使用wepy开发小程序-7|子组件向父组件传参

子组件向父组件传递参数

首先看下需求

点餐.png

这是我们从公共接口菜谱里提取的数据，模拟饿了吗和美团的下单流程。
按钮所在的是个子组件，点击按钮下面的两个技术器都需要累加。

最终实现效果如下

实现效果.png

典型的子组件向父组件传值的问题。
在实现这个子组件向父组件传值的问题之前，我们先回想下，父组件是如何向子组件传值的

父组件向子组件传值

父组件向子组件传值，这一过程经常出现在列表的循环中
就像我们上面循环的那几个列表一样

 <repeat for="{{subList}}" key="sublist" item="item" index="index">
        <itemDish :fromOrderSub.sync="item" @childFn.user="linkTo"></itemDish>
</repeat>

这里这个:fromOrderSub实际上是在itemDish的props属性中定义好的，
如下：

    props = {
      fromOrderSub:{
          default:'null'
      }
    }

现在我们就来看这个点击按钮计算价格是如何实现的吧。
itemDish组件

<view class="btn add-btn" @tap="addDish({{dish_price}})" >
    <view class="button-small-wrap">
        <wxc-button btnStyle="background:#f7cb47;min-width:66rpx;min-height:66rpx;padding:0;border-radius: 16rpx"><wxc-icon color="#fff" type="add"></wxc-icon></wxc-button>
    </view>
 </view>

js部分

    methods = {
      addDish(price,event){
        console.log("添加一份菜");
        this.$emit('balance',price);
      }  
    }

对应的父组件

    events = {
      balance(price,event){
        this.dish_nums += 1;
        this.dish_total += price;
      }
    }

逻辑不严谨只是暂时的实现功能，你们也可以自己完善逻辑