" />

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序父子組件通信詳細介紹

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

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

  • 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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

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

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

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

    IE事件對象(The Internet Explorer Event Object)

    不同于DOM事件對象,基于Event Handler授權這種方式,IE事件對象可以用不同的方式進行訪問。當一個事件Handler通過DOM 0 級的方式被授權,則這個事件對象將作為window對象的屬性而存在
    2012-06-06
  • js實現(xiàn)淘寶瀏覽商品放大鏡功能

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

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

    實現(xiàn)web打印的各種方法介紹及實現(xiàn)代碼

    web的打印方法具我自己懂得知道的有:JQuery插件Jqprint實現(xiàn);JQery打印插件PrintArea實現(xiàn)網頁打印;CSS控制網頁打印樣式,本文詳細介紹實現(xiàn)步驟,感興趣的朋友可以了解下
    2013-01-01
  • JS中的async與await異步編程及await使用陷阱

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

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

    JSONP原理及簡單實現(xiàn)

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

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

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

    簡單談談JavaScript的同步與異步

    這篇文章主要介紹了簡單談談JavaScript的同步與異步的相關資料,需要的朋友可以參考下
    2015-12-12
  • 微信小程序實現(xiàn)點餐小程序左側滑動菜單

    微信小程序實現(xiàn)點餐小程序左側滑動菜單

    這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)點餐小程序左側滑動菜單,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    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

最新評論