#微信小程序子传父 #小程序子组件向父组件传值 小程序子组件触发父组件中的事件

现在有这样一个情况，在一个页面中。 有一个子组件。 我希望在该子组件中触发事件，然后去触发父组件中的事件。

具体来讲，

如图，“点击以关闭父组件中的红色块” 是子组件中的button元素。 我现在希望点击该按钮，控制显示父组件中的红色块的切换显示。 并且修改红色块中绑定的值。

实验准备

文件目录结构如下：

父页面index.wxml:

子组件my-component.wxml:

实验开始：

一：给子组件 my-component 绑定点击事件，并绑定一个自定义事件名：

my-component.wxml: 定义触发条件，bindtap

<button bindtap="customEventTrigger" type="default">点击以关闭父组件中的红色块</button>

my-component.js: 定义触发事件，然后预定义一个本组件在引用时的接收事件。 当“customEventTrigger”被触发时，“customEventHandler”所对应的事件也将会被触发

methods: { customEventTrigger: function () { this.triggerEvent(\'customEventHandler\', { anyData: "world" }) } }

二：在父页面调用子组件时，绑定刚才预定义的自定义事件名，“customEventHandler”

index.wxml: 将事件名和“customEvent” 绑定，

<my-component bind:customEventHandler="customEvent"></my-component> <view wx:if="{{toggleDisplay}}"> <text>{{msg}}</text> </view>

三：在父页面脚本逻辑中定义“customEvent”事件规则

index.js:

Page({ data: { toggleDisplay:true, msg:"hello" }, customEvent:function(event){ console.log(event) }, })

四：测试接收响应：现在点击“点击以关闭父组件中的红色块” 这个button，将打印出一下信息

这就是”event“的log值，可以看到，detail.anyData 就传过来了。 其实到这里，就实现了目的了。

最后为了实验的完整，实现下接下来的逻辑。

五：控制切换，和控制文字。

控制文字：

index.js:

Page({ data: { toggleDisplay:true, msg:"hello" }, customEvent:function(event){ let receiveData = event.detail.anyData; this.setData({ msg:receiveData }) }, })

点击后，文字改变了。

切换显示，基本一样，在触发函数中去更改data中对应的值即可。

Page({ data: { toggleDisplay:true, msg:"hello" }, customEvent:function(event){ let receiveData = event.detail.anyData; this.setData({ msg:receiveData, toggleDisplay:!this.data.toggleDisplay }) }, })