【微信小程序】子主鍵使用父組件實例對象操作，比如使用父級組件的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});
       });