#微信小程序子傳父 #小程序子組件向父組件傳值 小程序子組件觸發父組件中的事件

本文代碼可在此處下載：link

現在有這樣一個情況，在一個頁面中。 有一個子組件。 我希望在該子組件中觸發事件，然后去觸發父組件中的事件。

具體來講，

如圖，“點擊以關閉父組件中的紅色塊” 是子組件中的button元素。 我現在希望點擊該按鈕，控制顯示父組件中的紅色塊的切換顯示。 並且修改紅色塊中綁定的值。

實驗准備

文件目錄結構如下：

父頁面index.wxml:

子組件my-component.wxml:

實驗開始：

一：給子組件 my-component 綁定點擊事件，並綁定一個自定義事件名：

my-component.wxml: 定義觸發條件，bindtap

 <button bindtap="customEventTrigger" type="default">點擊以關閉父組件中的紅色塊</button>

my-component.js: 定義觸發事件，然后預定義一個本組件在引用時的接收事件。 當“customEventTrigger”被觸發時，“customEventHandler”所對應的事件也將會被觸發

  methods: {
    customEventTrigger: function () {
      this.triggerEvent('customEventHandler', {
        anyData: "world"
      })
    }
  }

二：在父頁面調用子組件時，綁定剛才預定義的自定義事件名，“customEventHandler”

index.wxml: 將事件名和“customEvent” 綁定，

<my-component bind:customEventHandler="customEvent"></my-component>
<view wx:if="{{toggleDisplay}}" style="width:100px;height:100px;background-color:#ff000055">
  <text>{{msg}}</text>
</view>

三：在父頁面腳本邏輯中定義“customEvent”事件規則

index.js:

Page({
  data: {
    toggleDisplay:true,
    msg:"hello"
  },
  customEvent:function(event){
    console.log(event)
  },
})

四：測試接收響應：現在點擊“點擊以關閉父組件中的紅色塊” 這個button，將打印出一下信息

這就是”event“的log值，可以看到，detail.anyData 就傳過來了。 其實到這里，就實現了目的了。

最后為了實驗的完整，實現下接下來的邏輯。

五：控制切換，和控制文字。

1. 控制文字：

   index.js:

   Page({
     data: {
       toggleDisplay:true,
       msg:"hello"
     },
     customEvent:function(event){
       let receiveData = event.detail.anyData;
       this.setData({
         msg:receiveData
       })
     },
   })
   

點擊后，文字改變了。

2. 切換顯示，基本一樣，在觸發函數中去更改data中對應的值即可。

   Page({
     data: {
       toggleDisplay:true,
       msg:"hello"
     },
     customEvent:function(event){
       let receiveData = event.detail.anyData;
       this.setData({
         msg:receiveData,
         toggleDisplay:!this.data.toggleDisplay
       })
     },
   
   })
   

本文代碼可在此處下載：link