zoukankan      html  css  js  c++  java
  • 【微信小程序】子主键使用父组件实例对象操作,比如使用父级组件的setData或使用父级组件方法

    微信官方给出三种组件通信方式:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html#%E8%A7%A6%E5%8F%91%E4%BA%8B%E4%BB%B6

    只有父组件获取子组件示例对象操作,可以通过监听事件传回调函数参数,实现子主键使用父组件实例对象操作

    组件间通信

    组件间的基本通信方式有以下几种。

    • WXML 数据绑定:用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容数据(自基础库版本 2.0.9 开始,还可以在数据中包含函数)。具体在 组件模板和样式 章节中介绍。
    • 事件:用于子组件向父组件传递数据,可以传递任意数据。
    • 如果以上两种方式不足以满足需要,父组件还可以通过 this.selectComponent 方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法。  

    1、父组件声明监听事件执行方法

          TopEvent(e){
             e.detail.bc(this);
          },
    2、给子组件设置监听事件
        <component-test bind:e_TopEvent="TopEvent" />
     
    3、子组件触发监听,实现操作父组件实例对象
          //子组件向最上级父组件执行对最上级父组件对象的操作
          triggerTopEvent(bc){
             if(this.data.isTop){
                bc(this);
             }else{
                this.triggerEvent('e_TopEvent', {
                   bc:bc,
                }, { bubbles: true, composed: true });
             }
          },
    
        //调用
        var that=this;
           this.triggerTopEvent(function(top){
              top.data.imgList[n.attrs.i]= n.attrs['original-src'] || n.attrs.src;
              top.setData({imgList:top.data.imgList});
          that.setData({imgList:top.data.imgList});
           });
  • 相关阅读:
    Codeforces Round #260 (Div. 2)
    面试题:给定数组a,找到最大的j-i, 使a[j]>a[i]
    ssh自动输入密码脚本 切换目录脚本
    make工作时的执行步骤
    Codeforces Round #259 (Div. 2)
    Codeforces Round #258 (Div. 2)
    如何在半径为1的圆中随机选取一个点
    面试中常问的有关随机选取k个数的总结
    topcoder SRM 628 DIV2 BracketExpressions
    topcoder SRM 628 DIV2 BishopMove
  • 原文地址:https://www.cnblogs.com/lanofsky/p/15193132.html
Copyright © 2011-2022 走看看