小程序子组件向父组件传值_小程序组件通信

小程序子组件向父组件传值_小程序组件通信父组件页面是carts.wxml子页面是product.html子组件wxml代码<viewclass=’cartAllSel’bindtap=”bindSelectAll”><iconwx:if=”{{selectedAllStatus}}”class=’iconDel’type=’success’color=’#4D4D4D’size…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

父组件页面是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>

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/197110.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Java多线程:线程死锁

    Java多线程:线程死锁

    2021年11月16日
    42
  • python数组求和_python数组求和

    python数组求和_python数组求和广告关闭腾讯云11.11云上盛惠,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元!作者:dyq666,zhihu.compeopledyq666本专题主要介绍哈希表和指针两种方法来解决该类问题,从两个数之和引申到三个数之和,再从四个数之和的问题上思考如何构建出一种通用的代码(可以解决n个数之和)。本文主要内容是通过001问题来初步了解数组求和的两种常用方法。0…

    2022年8月13日
    2
  • c语言sizeof()_sizeof函数的用法

    c语言sizeof()_sizeof函数的用法sizeof是C语言中保留关键字,也可以认为是一种运算符,单目运算符。常见的使用方式:inta=10;intarr=[1,2,3];charstr[]="hello";intlen_a=sizeof(a);intlen_arr=sizeof(arr);intlen_str=sizeof(str)printf("len_a=%d,len_arr=%d,le…

    2022年9月17日
    2
  • java基本数据类型有哪些_java中有八种基本数据类型

    java基本数据类型有哪些_java中有八种基本数据类型在java中有八种基本数据类型对应每种基本类型又有八种包装类型:基本类型:boolean,char,int,byte,short,long,float,double包装器类型:Boolean,Character,Integer,Byte,Short,Long,Float,Double从上面我们可以看到除了char和int其它的包装类型名称和对应的基本类型一样只是首字母大写了。既然有了基本…

    2022年7月7日
    22
  • react使用antd警告:Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance「建议收藏」

    react使用antd警告:Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance「建议收藏」react中使用antd警告警告内容:警告原因:解决办法:警告内容:Warning:findDOMNodeisdeprecatedinStrictMode.findDOMNodewaspassedaninstanceofWavewhichisinsideStrictMode.Instead,addarefdirectlytotheeleme…

    2022年6月10日
    26
  • loadrunner使用教程之IP欺骗[通俗易懂]

    loadrunner使用教程之IP欺骗[通俗易懂]上次做压力测试的时候网站崩了,老大怀疑一点原因是说我用同一个IP施压2000个用户,服务器可能拒绝了些访问请求,这样不是很靠谱。今天有空就研究了下IP欺骗,模仿多个IP里发射用户,“这样可以在很大程度上模拟实际使用中多IP访问和并测试服务器均衡处理的能力”,嗯..第一步,录制脚本,不说了,反正也是自己看。简单录制了一个查询操作的脚本。第二步,把脚本放场景中来,脚本是脚本,场景是场景,一定要

    2022年10月10日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号