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});
           });
  • 相关阅读:
    源代码的下载和编译
    Git使用入门
    搭建Android开发环境
    安卓系统移植与驱动开发概述
    第十章
    第九章
    第八章
    第七章读书笔记
    第六章读书笔记
    第五章读书笔记
  • 原文地址:https://www.cnblogs.com/lanofsky/p/15193132.html
Copyright © 2011-2022 走看看