《十二》微信小程序中组件间通信

小程序组件通信详解

原创

已于 2025-02-03 15:08:19 修改 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

于 2022-11-05 12:38:15 首次发布

本文介绍了小程序中组件间通信的各种方式，包括WXML数据绑定、事件传递、自定义事件及通过获取子组件实例来调用子组件的方法等。还详细解释了如何使用triggerEvent方法触发事件。

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

WXML 数据绑定：用于父组件向子组件的指定属性设置数据。
事件：用于子组件向父组件传递数据，可以传递任意数据。
父组件还可以通过 this.selectComponent() 方法获取子组件实例对象，这样就可以直接访问子组件的任意数据和方法。

父组件通过 properties 属性给子组件传递数据：

// 父组件 index.wxml
<search-input placeholderText="搜明星、达人"></search-input>

// 子组件 searchInput.wxml
<input placeholder="{
  
  {placeholderText}}"/>

// 子组件 searchInput.js
Component({
 	properties: {
	    placeholderText:{
	      // 支持 String、Numer、Boolean、Object、Array、null（表示不限制类型） 类型
	      type: String,
	      value: '请输入'
	    }
   }
})

子组件通过自定义事件给父组件传递数据：

自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。

// 子组件 searchInput.wxml
<input bindconfirm="handleSearch"/>

// 子组件 searchInput.js
Component({
 	methods: {
	    handleSearch(){
	      // 自定义组件触发事件时，需要使用 triggerEvent 方法指定事件名、detail 对象和事件选项。
	      this.triggerEv