Wechat applet sub components transfer values to the page (communication between parent and child components) with source code

Many students may know how to call the internal methods of sub components on the page , But how can the values in the component be transferred to the page ？

Quick use event trigger ！

The main points of ：

1. In any function of the component , you 're right , Whatever , It can be a life cycle such as attached, It can also be a click function bindtap, See business requirements , Create a trigger triggerEvent
2. The component referenced on the page needs to bind this event , Because you created the event trigger , Only when you bind this event can it be triggered ！

How to create triggers ？

Official wechat documents
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html

Use... On the page

** Because this event trigger is in attached** When all the created components enter the node tree, they are triggered

Practical cases （ Component form values are passed to the page ）

Page original state

When the component input field loses focus, the value is transferred to the page

Call component internal methods （ You can also pass the values inside the component to the page ）

1. First, get the component instance on the page , So the components should be assigned to the page id
2. Then you can get the data inside the component

See the effect

Get the component instance , Print out , Can I get the internal data of the component ？


Call component internal methods

Use component instances directly . Just call it

Source code

Components

<template>
  <view>
    <input type="text" bindblur="getVal" placeholder=" Please enter " />
  </view>
</template>
<script> import {
      createComponent } from '@mpxjs/core' createComponent({
      data: {
      communicate: ' I am the value passed from the subcomponent ', a: ' For viewing ', b: ' For example, it looks a little more ', c: 'example' }, methods: {
      //  Create an event trigger when the input field loses focus and pass the form value  getVal(e) {
      // console.log(e.detail.value) this.triggerEvent( 'customevent', {
      msg: e.detail.value }, {
      bubbles: true } ) }, //  Component internal methods  _inner() {
      console.log(' Called the component internal method ') } } }) </script>

page

<template>
  <view class="container">
    <view class="result">{
   {msg}}</view>
    <son-component id="my" bind:customevent="onTap" />
    <button bindtap="inner"> Call component internal methods </button>
  </view>
</template>
<script> import {
      createPage } from '@mpxjs/core' createPage({
      data: {
      msg: ' I haven't been changed yet ' }, 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": " Component communication ", "usingComponents": {
      "son-component": "../components/event" } } </script>