微信小程序父子組件通信詳細介紹
組件間的基本通信方式有以下幾種:
- WXML 數據綁定:用于父組件向子組件的指定屬性設置數據。
- 事件:用于子組件向父組件傳遞數據,可以傳遞任意數據。
- 如果以上兩種方式不足以滿足需要,父組件還可以通過
this.selectComponent()
方法獲取子組件實例對象,這樣就可以直接訪問組件的任意數據和方法。
父組件通過 properties 屬性給子組件傳遞數據:
// 父組件 home.wxml <search-input placeholderText="搜明星、達人"></search-input>
// 子組件 searchInput.wxml <input placeholder="{{placeholderText}}"/> // 子組件 searchInput.js Component({ properties: { placeholderText:{ type: String, value: '請輸入' } } })
子組件通過自定義事件給父組件傳遞數據:
自定義組件可以觸發(fā)任意的事件,引用組件的頁面可以監(jiān)聽這些事件。
// 子組件 searchInput.wxml <input bindconfirm="handleSearch"/> // 子組件 searchInput.js Component({ methods: { handleSearch(){ // 自定義組件觸發(fā)事件時,需要使用 triggerEvent 方法指定事件名、detail 對象和事件選項。 this.triggerEvent('confirmSearch', {value: '我是輸入的值'}, {}); } } })
// 引用自定義組件的頁面 home.wxml // 可以在引用自定義組件的頁面通過 bind 監(jiān)聽子組件觸發(fā)的事件 <search-input bindconfirmSearch="handleSearch"></search-input> // 父組件 home.js Page({ handleSearch(e){ const value = e.detail.value; } })
triggerEvent():
自定義組件觸發(fā)事件時,需要使用 triggerEvent 方法,指定事件名、detail 對象和觸發(fā)事件的選項。
觸發(fā)事件的選項包括:
- bubbles:事件是否冒泡。
- composed:事件是否可以穿越組件邊界。屬性值為 false 時,事件將只能在引用組件的節(jié)點樹上觸發(fā),不進入其他任何組件內部。
- capturePhase:事件是否擁有捕獲階段。
<-- custom-li.wxml --> <view> <view bindtap="liEventListener">我是自定義的 li</view> </view> // custom-li.js Component({ relations: { '../custom-ul/custom-ul': { type: 'parent', } }, methods: { liEventListener: function(){ this.triggerEvent('click', {}) // 觸發(fā) liPageEventListener // this.triggerEvent('click', {}, { bubbles: true }) // 依次觸發(fā) liPageEventListener、ulPageEventListener // this.triggerEvent('click', {}, { bubbles: true, composed: true }) // 依次觸發(fā) liPageEventListener、// 依次觸發(fā) liPageEventListener、ulPageEventListener、ulPageEventListener } } })
<!-- custom.wxml --> <view bindclick="ulEventListener"> <view class="header">我是自定義的 ul</view> <slot></slot> </view>
<!-- index.wxml --> <view> <custom-ul bindclick="ulPageEventListener"> <custom-li bindclick="liPageEventListener"></custom-li> </custom-ul> </view>
父組件通過獲取子組件實例來調用子組件的數據和方法:
可在父組件里調用 this.selectComponent()
來獲取子組件的實例對象,調用時需要傳入一個匹配選擇器 selector。
// 父組件home.wxml <search-input class="home-search"></search-input> //父組件 home.js Page({ handleChangeTabs () { const searchImput = this.selectComponent('.home-search'); } })
默認情況下,小程序與插件之間、不同插件之間的組件將無法通過 selectComponent 得到組件實例,將返回 null。如果想讓一個組件在上述條件下依然能被 selectComponent 返回,可使用內置 behavior: wx://component-export
自定義其返回結果。使用該 behavior 時,自定義組件中的 export 定義段將用于指定組件被 selectComponent 調用時的返回值。
// 自定義組件 my-component 內部 Component({ behaviors: ['wx://component-export'], export() { return { myField: 'myValue' } } })
<!-- 父組件使用自定義組件 --> <my-component id="the-id" /> // 父組件調用 const child = this.selectComponent('#the-id') // 等于 { myField: 'myValue' }
到此這篇關于微信小程序父子組件通信詳細介紹的文章就介紹到這了,更多相關小程序組件通信內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
IE事件對象(The Internet Explorer Event Object)
不同于DOM事件對象,基于Event Handler授權這種方式,IE事件對象可以用不同的方式進行訪問。當一個事件Handler通過DOM 0 級的方式被授權,則這個事件對象將作為window對象的屬性而存在2012-06-06實現(xiàn)web打印的各種方法介紹及實現(xiàn)代碼
web的打印方法具我自己懂得知道的有:JQuery插件Jqprint實現(xiàn);JQery打印插件PrintArea實現(xiàn)網頁打印;CSS控制網頁打印樣式,本文詳細介紹實現(xiàn)步驟,感興趣的朋友可以了解下2013-01-01JavaScript中Iterator迭代器接口和循環(huán)
這篇文章主要介紹了JavaScript中Iterator迭代器接口和循環(huán),迭代器是數據結構遍歷的一種機制迭代器主要是提供for...of使用,更多相關內推需要的小伙伴可以參考下面文章內容2022-06-06js apply/call/caller/callee/bind使用方法與區(qū)別分析
js apply/call/caller/callee/bind使用方法與區(qū)別分析,需要的朋友可以參考下。2009-10-10