微信小程式父子元件通訊詳細介紹

2022-12-01 14:02:04

元件間的基本通訊方式有以下幾種：

WXML 資料繫結：用於父元件向子元件的指定屬性設定資料。
事件：用於子元件向父元件傳遞資料，可以傳遞任意資料。
如果以上兩種方式不足以滿足需要，父元件還可以通過 this.selectComponent() 方法獲取子元件範例物件，這樣就可以直接存取元件的任意資料和方法。

父元件通過 properties 屬性給子元件傳遞資料：

// 父元件 home.wxml
<search-input placeholderText="搜明星、達人"></search-input>

// 子元件 searchInput.wxml
<input placeholder="{{placeholderText}}"/>
// 子元件 searchInput.js
Component({
 	properties: {
	    placeholderText:{
	      type: String,
	      value: '請輸入'
	    }
   }
})

子元件通過自定義事件給父元件傳遞資料：

自定義元件可以觸發任意的事件，參照元件的頁面可以監聽這些事件。

// 子元件 searchInput.wxml
<input bindconfirm="handleSearch"/>
// 子元件 searchInput.js
Component({
 	methods: {
	    handleSearch(){
	      // 自定義元件觸發事件時，需要使用 triggerEvent 方法指定事件名、detail 物件和事件選項。
	      this.triggerEvent('confirmSearch', {value: '我是輸入的值'}, {});
	    }
   }
})

// 參照自定義元件的頁面 home.wxml
// 可以在參照自定義元件的頁面通過 bind 監聽子元件觸發的事件
<search-input bindconfirmSearch="handleSearch"></search-input>
// 父元件 home.js
Page({
	handleSearch(e){
		const value = e.detail.value;
	}
})

triggerEvent()：

自定義元件觸發事件時，需要使用 triggerEvent 方法，指定事件名、detail 物件和觸發事件的選項。

觸發事件的選項包括：

bubbles：事件是否冒泡。
composed：事件是否可以穿越元件邊界。屬性值為 false 時，事件將只能在參照元件的節點樹上觸發，不進入其他任何元件內部。
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', {}) // 觸發 liPageEventListener
      // this.triggerEvent('click', {}, { bubbles: true }) // 依次觸發 liPageEventListener、ulPageEventListener
      // this.triggerEvent('click', {}, { bubbles: true, composed: true }) // 依次觸發 liPageEventListener、// 依次觸發 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' }

到此這篇關於微信小程式父子元件通訊詳細介紹的文章就介紹到這了,更多相關小程式元件通訊內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

微信小程式父子元件通訊詳細介紹

熱門文章