" />

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序父子組件通信詳細(xì)介紹

 更新時(shí)間:2022年11月30日 16:42:06   作者:花鐺  
這篇文章主要介紹了小程序中父子組件通信詳解,在父組件中,為子組件添加屬性數(shù)據(jù),即可實(shí)現(xiàn)父組件向子組件通信,文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下

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

  • 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)文章

  • 深入理解JavaScript中的for循環(huán)

    深入理解JavaScript中的for循環(huán)

    這篇文章主要給大家深入的介紹了JavaScript中的for循環(huán),其中包括ES5中的三種for循環(huán),分別是簡(jiǎn)單for循環(huán)、for-in以及forEach,另外還詳細(xì)介紹了ES6新增的一種循環(huán):for-of ,有需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-02-02
  • IE事件對(duì)象(The Internet Explorer Event Object)

    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
  • js實(shí)現(xiàn)淘寶瀏覽商品放大鏡功能

    js實(shí)現(xiàn)淘寶瀏覽商品放大鏡功能

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)淘寶瀏覽商品放大鏡功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-10-10
  • 實(shí)現(xiàn)web打印的各種方法介紹及實(shí)現(xiàn)代碼

    實(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-01
  • JS中的async與await異步編程及await使用陷阱

    JS中的async與await異步編程及await使用陷阱

    這篇文章主要介紹了async與await異步編程,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-03-03
  • JSONP原理及簡(jiǎn)單實(shí)現(xiàn)

    JSONP原理及簡(jiǎn)單實(shí)現(xiàn)

    這篇文章主要介紹了JSONP原理及簡(jiǎn)單實(shí)現(xiàn)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-06-06
  • JavaScript中Iterator迭代器接口和循環(huán)

    JavaScript中Iterator迭代器接口和循環(huán)

    這篇文章主要介紹了JavaScript中Iterator迭代器接口和循環(huán),迭代器是數(shù)據(jù)結(jié)構(gòu)遍歷的一種機(jī)制迭代器主要是提供for...of使用,更多相關(guān)內(nèi)推需要的小伙伴可以參考下面文章內(nèi)容
    2022-06-06
  • 簡(jiǎn)單談?wù)凧avaScript的同步與異步

    簡(jiǎn)單談?wù)凧avaScript的同步與異步

    這篇文章主要介紹了簡(jiǎn)單談?wù)凧avaScript的同步與異步的相關(guān)資料,需要的朋友可以參考下
    2015-12-12
  • 微信小程序?qū)崿F(xiàn)點(diǎn)餐小程序左側(cè)滑動(dòng)菜單

    微信小程序?qū)崿F(xiàn)點(diǎn)餐小程序左側(cè)滑動(dòng)菜單

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)餐小程序左側(cè)滑動(dòng)菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • js apply/call/caller/callee/bind使用方法與區(qū)別分析

    js apply/call/caller/callee/bind使用方法與區(qū)別分析

    js apply/call/caller/callee/bind使用方法與區(qū)別分析,需要的朋友可以參考下。
    2009-10-10

最新評(píng)論