小程序子組件傳值給父組件

父組件頁面是carts.wxml 子頁面是product.html

子組件wxml代碼

<view class='cartAllSel'  bindtap="bindSelectAll"  >
    <icon wx:if="{{selectedAllStatus}}" class='iconDel' type='success' color='#4D4D4D' size="20" ></icon>
    <icon  class='iconDel' wx:else  type="circle" size="20"></icon>
    <text class='product-title'>全選</text>
</view>

子組件js代碼

 methods: {
    //購物車全選
    bindSelectAll: function (e) {
      var that =this;
      var allChecked = !this.data.selectedAllStatus;
      var carts = this.data.productList;
      for (var i = 0; i < carts.length; i++) {
        carts[i].selected = allChecked;
      }
      if (allChecked){
        this.data.checkedNum = carts.length;
      }else{
        this.data.checkedNum=0;
      }
      //需要添加部分,traCheckedNum是父頁面調用需要  
      var checkeddata = { checkedNum: this.data.checkedNum};
      this.triggerEvent("traCheckedNum", checkeddata )
      
      this.setData({
        productList: carts,
        selectedAllStatus: allChecked,
      })
    },
}

父頁面 carts.wxml

需要在子組件處添加 bind:traCheckedNum="checkNum"  checkNum是父js中的方法

<ProductList  bind:traCheckedNum="checkNum" productList="{{cartList}}" listType="{{'cart'}}"></ProductList>

 

父頁面 carts.js

注意checkNum方法是不能寫在Methods中不然小程序會報找不到該組件,就和data平級就可以

checkNum: function (e) {
    this.setData({
      checkedNum: e.detail.checkedNum,
    })
    console.log(e.detail.checkedNum)
 }

父頁面carts.wxml引用值

 <view>已選 {{checkedNum}}</view>

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章