来源:通义千文2.5
步骤 1: 定义父组件中的方法
首先,在父组件中定义一个方法(如 handleClick
),并准备一个用于接收子组件传来的数据的方法。
父组件(Parent.wxml)
html
<!-- parent.wxml -->
<view class="parent">
<view>这是父组件</view>
<child id="childComponent" bind:customEvent="handleClickFromChild"></child>
</view>
父组件逻辑文件(Parent.js)
// parent.js
Page({
data: {
message: ''
},
handleClickFromChild: function (e) {
console.log('接收到子组件的数据:', e.detail);
this.setData({
message: e.detail.message
});
}
});
步骤 2: 在子组件中触发事件
接下来,在子组件中触发一个自定义事件,将数据传递给父组件。
子组件模板文件(Child.wxml)
<!-- child.wxml -->
<view class="child">
<button bindtap="sendDataToParent">发送数据给父组件</button>
</view>
子组件逻辑文件(Child.js)
// child.js
Component({
methods: {
sendDataToParent: function () {
var data = { message: '你好,我是子组件!' };
this.triggerEvent('customEvent', data);
}
}
});
详解this.triggerEvent('customEvent', data)
-
this
关键字:- 在子组件的方法内部,
this
指向当前组件实例。这意味着你可以使用this
来访问组件的状态、属性和方法等。
- 在子组件的方法内部,
-
triggerEvent
方法:triggerEvent
是微信小程序提供的一个API,用于在组件内部触发一个自定义事件。它接受两个参数:- 第一个参数是一个字符串,表示事件的名称;
- 第二个参数是事件携带的数据。
-
事件名称:
- 在本例中,事件名称为
'customEvent'
。你需要确保这个事件名称与你在父组件中绑定的事件名称一致,这样父组件才能正确地接收到事件。
- 在本例中,事件名称为
-
传递的数据:
- 事件可以携带数据。在这个例子中,
data
变量包含了一个对象{ message: '你好,我是子组件!' }
。这个对象将作为事件的一部分被传递到父组件。
- 事件可以携带数据。在这个例子中,
-
调用
triggerEvent
方法:- 当
sendDataToParent
方法被调用时(例如,当用户点击子组件中的按钮时),triggerEvent
方法就会被调用,触发一个名为'customEvent'
的事件,并将数据对象{ message: '你好,我是子组件!' }
作为参数传递。
- 当