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