【蓝牙小程序】微信小程序子组件如何向父组件传递数据

1. 子组件触发自定义事件

在子组件中，使用 this.triggerEvent 方法触发自定义事件，并传递数据。

javascript

复制

// 子组件中
Component({
  methods: {
    sendDataToParent() {
      const data = { message: 'Hello, Parent!' };
      this.triggerEvent('myevent', data); // 'myevent' 是自定义事件名，data 是要传递的数据
    }
  }
});

2. 父组件监听自定义事件

在父组件的 WXML 中，通过 bind: 或 bind 监听子组件的自定义事件。

xml

复制

<!-- 父组件的 WXML -->
<child-component bind:myevent="onMyEvent"></child-component>

 

运行 HTML

3. 父组件处理事件

在父组件的 JS 中定义事件处理函数，接收子组件传递的数据。

javascript

复制

// 父组件中
Page({
  onMyEvent(event) {
    const data = event.detail; // 通过 event.detail 获取子组件传递的数据
    console.log(data.message); // 输出: Hello, Parent!
  }
});

示例代码

子组件 (child-component)

child-component.json

json

复制

{
  "component": true
}

child-component.wxml

xml

复制

<button bindtap="sendDataToParent">点击传递数据</button>

 

运行 HTML

child-component.js

javascript

复制

Component({
  methods: {
    sendDataToParent() {
      const data = { message: 'Hello, Parent!' };
      this.triggerEvent('myevent', data);
    }
  }
});

父组件

parent.json

json

复制

{
  "usingComponents": {
    "child-component": "/path/to/child-component"
  }
}

parent.wxml

xml

复制

<child-component bind:myevent="onMyEvent"></child-component>

 

运行 HTML

parent.js

javascript

复制

Page({
  onMyEvent(event) {
    const data = event.detail;
    console.log(data.message); // 输出: Hello, Parent!
     
    //当不确定取什么数据的什么选项的时候，使用 console.log(event.detail); 进行调试
  }
});

总结

• 子组件通过 this.triggerEvent 触发自定义事件并传递数据。

• 父组件通过 bind: 或 bind 监听事件，并在事件处理函数中接收数据。

这种方式实现了子组件向父组件的数据传递。