微信小程序父子组件通信详细介绍

组件间的基本通信方式有以下几种:

  • 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' }
作者:花铛原文地址:https://blog.csdn.net/wsln_123456/article/details/127702295

%s 个评论

要回复文章请先登录注册