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

本文代码可在此处下载：link

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

具体来讲，

如图，“点击以关闭父组件中的红色块” 是子组件中的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}}" style="100px;height:100px;background-color:#ff000055">
  <text>{{msg}}</text>
</view>

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

index.js:

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

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

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

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

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

1. 控制文字：

   index.js:

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

点击后，文字改变了。

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

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

本文代码可在此处下载：link