神刀安全网

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

子组件向父组件传递参数

首先看下需求

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

点餐.png

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

最终实现效果如下

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

实现效果.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;       }     } 

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

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 使用wepy开发小程序-7|子组件向父组件传参

分享到:更多 ()