小程序 - 組件通信 - 子傳父@小四

小程序 - 組件通信 - 子傳父,代碼如下:

// 第一步:通過(guò)自定義事件的方式通知父組件
// components/music/index.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    name: String,
    type: String
  },
  methods: {
    onMusic () {
      /*
       *第一步:通過(guò)自定義事件的方式通知父組件
       triggerEvent 指定事件名、detail對(duì)象和事件選項(xiàng) - 通知父組件
        parentReceive自定義事件名、name: '雪落下的聲音'要傳遞過(guò)去的數(shù)據(jù)、事件選項(xiàng)有三個(gè)(見(jiàn)官網(wǎng))
      */
      this.triggerEvent('parentReceive', {
        name: '雪落下的聲音'
      }, {})
    }
  }
})
<!--第二步:事件綁定 -->
<!--components/music/index.wxml-->
<view>music:{歌曲名稱(chēng):{{ name }},類(lèi)型:{{ type }}}</view>
<button bind:tap="onMusic">通知父組件</button>

<!-- 
第三步:在組件標(biāo)簽上綁定在子組件中自定義的事件“parentReceive”,通過(guò)回調(diào)函數(shù)的形式在父組件中進(jìn)行邏輯處理;
pages/index/index.wxml
-->
<f-music name="成都" type="2" bind:parentReceive="parentCallBack" />
// 第四步:在回調(diào)函數(shù)的事件對(duì)象中進(jìn)行數(shù)據(jù)接收
// pages/index/index.js
Page({
  // 第四步:在回調(diào)函數(shù)的事件對(duì)象中進(jìn)行數(shù)據(jù)接收
  parentCallBack (event) {
    console.log(event)
  }
})

https://github.com/xiaosi0707/wechat-miniProgram-demo/tree/master/child-parent

同學(xué)們聽(tīng)我說(shuō)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容