小程序 子組件傳值

需求,把A子組件的值傳給父組件,在通過父組件傳給子組件接收

A子組件

js: data

組件間通信

組件間的基本通信方式有以下幾種。

• WXML 數據綁定:用于父組件向子組件的指定屬性設置數據,僅能設置 JSON 兼容數據(自基礎庫版本 2.0.9開始,還可以在數據中包含函數)。具體在 組件模板和樣式 章節中介紹。
• 事件:用于子組件向父組件傳遞數據,可以傳遞任意數據。
• 如果以上兩種方式不足以滿足需要,父組件還可以通過 this.selectComponent 方法獲取子組件實例對象,這樣就可以直接訪問組件的任意數據和方法。

監聽事件

事件系統是組件間通信的主要方式之一。自定義組件可以觸發任意的事件,引用組件的頁面可以監聽這些事件。關于事件的基本概念和用法,參見 事件 。

監聽自定義組件事件的方法與監聽基礎組件事件的方法完全一致:

代碼示例:

<!-- 當自定義組件觸發“myevent”事件時,調用“onMyEvent”方法 --><component-tag-name bindmyevent="onMyEvent" /><!-- 或者可以寫成 --><component-tag-name bind:myevent="onMyEvent" />

Page({  onMyEvent: function(e){    e.detail // 自定義組件觸發事件時提供的detail對象  }})

觸發事件

自定義組件觸發事件時,需要使用 triggerEvent 方法,指定事件名、detail對象和事件選項:

代碼示例:

在開發者工具中預覽效果

<!-- 在自定義組件中 --><button bindtap="onTap">點擊這個按鈕將觸發“myevent”事件</button>

Component({  properties: {},  methods: {    onTap: function(){      var myEventDetail = {} // detail對象,提供給事件監聽函數      var myEventOption = {} // 觸發事件的選項      this.triggerEvent('myevent', myEventDetail, myEventOption)    }  }})

觸發事件的選項包括:

關于冒泡和捕獲階段的概念,請閱讀 事件 章節中的相關說明。

代碼示例:

在開發者工具中預覽效果

// 頁面 page.wxml<another-component bindcustomevent="pageEventListener1">  <my-component bindcustomevent="pageEventListener2"></my-component></another-component>

// 組件 another-component.wxml<view bindcustomevent="anotherEventListener">  <slot /></view>

// 組件 my-component.wxml<view bindcustomevent="myEventListener">  <slot /></view>

// 組件 my-component.jsComponent({  methods: {    onTap: function(){      this.triggerEvent('customevent', {}) // 只會觸發 pageEventListener2      this.triggerEvent('customevent', {}, { bubbles: true }) // 會依次觸發 pageEventListener2 、 pageEventListener1      this.triggerEvent('customevent', {}, { bubbles: true, composed: true }) // 會依次觸發 pageEventListener2 、 anotherEventListener 、 pageEventListener1    }  }})

// 說人話

// 首先小程序在父組件中,通過引用子組件(或者說組件)之后,通過屬性item,index;把組組件中的數據,

// 傳值到子組件之后,子組件在properties中接收到值;

// 然后子組件通過自身的事件,比如catchtap="listtap"方法,激活自定義事件

// 接著子組件可以通過第二個參數,進行傳值到父組件中,就把子組件中的index傳給了父組件中

// 說人話

// 首先小程序在父組件中,通過引用子組件(或者說組件)之后,通過屬性item,index;把組組件中的數據,

// 傳值到子組件之后,子組件在properties中接收到值;

// 然后子組件通過自身的事件,比如catchtap="listtap"方法,激活自定義事件

// 接著子組件可以通過第二個參數,進行傳值到父組件中,就把子組件中的index傳給了父組件中

在任何時代,

教育說起來都是一件高大上的事,

但卻沒有什么真正有價值的東西是教得會的,

沒有任何一種文化模因

可以說清楚一個個體的全部問題。

在任何時代,

想要抓住人性的弱點來賺錢都非常容易,

沒有一點高級。

相反,想要建設一種文化,

耐心地拆除信息壁壘,

并且能夠堅持下來,

那真不是一般的不易。

在任何時代,

在一秒鐘內看到本質的人,

和花半輩子看不清的人,

自然是不一樣的命運。