微信小程序子组件向页面传值（父子组件间的通信）带源码

很多同学可能知道怎么在页面调用子组件内部方法，但是组件里的值怎么传到页面中来呢？

快使用事件触发！

要点：

1. 要在组件的随便一个函数里，没错，就是随便，可以是生命周期如attached，也可以是点击函数bindtap，看业务需求，创建一个触发器triggerEvent
2. 在页面引用的组件要绑定这个事件，因为你创建了事件触发器，你绑定了这个事件才能触发啊！

怎么创建触发器？

微信官方文档
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html

在页面使用

**因为这个事件触发器是在attached**创建的所以组件进入节点树就触发了

实用案例（组件表单值传给页面）

页面原始状态

当组件输入框失去焦点就把值传到页面

调用组件内部方法（同样可以把组件内部的值传给页面）

1. 首先要在页面拿到组件实例，所以在页面要给组件分配id
2. 其次才可以获取组件内部的数据

看效果

拿到组件实例，打印出来，是不是就可以拿到组件内部数据呢？


调用组件内部方法

用组件实例直接.出来调用就可以了

源码

组件

<template>
  <view>
    <input type="text" bindblur="getVal" placeholder="请输入" />
  </view>
</template>
<script> import {
      createComponent } from '@mpxjs/core' createComponent({
      data: {
      communicate: '我就是子组件传过来的值', a: '用于查看', b: '用于例子看起来多一点', c: 'example' }, methods: {
      // 在输入框失去焦点的时候创建事件触发器并把表单值传过去 getVal(e) {
      // console.log(e.detail.value) this.triggerEvent( 'customevent', {
      msg: e.detail.value }, {
      bubbles: true } ) }, // 组件内部方法 _inner() {
      console.log('调用了组件内部方法') } } }) </script>

页面

<template>
  <view class="container">
    <view class="result">{
   {msg}}</view>
    <son-component id="my" bind:customevent="onTap" />
    <button bindtap="inner">调用组件内部方法</button>
  </view>
</template>
<script> import {
      createPage } from '@mpxjs/core' createPage({
      data: {
      msg: '我还没被改变' }, methods: {
      onTap(e) {
      console.log(e.detail) this.msg = e.detail.msg }, inner() {
      const myComponent = this.selectComponent('#my') // console.log(myComponent) // this.msg = myComponent.__data__.c myComponent._inner() } } }) </script>
<style lang="stylus" scoped> .container width 100% height 300px box-sizing border-box overflow hidden .result line-height 50px height 50px font-size 16px font-weight 600 text-align center </style>
<script type="application/json"> {
      "navigationBarTitleText": "组件通信", "usingComponents": {
      "son-component": "../components/event" } } </script>