[WeChat Mini Program] Inter-component communication and events-obtaining instance objects of sub-components

1.0 Preface

1.1 Why I wrote this note

        The official document of the mini program only gives a rough code, which the author cannot find, so the easy-to-understand process is recorded so that novices can understand and use it.

1.2 The role of obtaining the subcomponent instance object

        When a component is referenced and the parent component uses a listening function, when the component listens to the occurrence of an event, it can call the method in the subcomponent by obtaining the subcomponent instance object.

2.Example code

2.1 index.wxml (wxml file of parent component)

<news2 class="news"></news2>

2.2 news.js (js file of subcomponent)

Component({
    
    
  methods: {
    
    
    Test01(Number){
    
    
      console.log("我收到的值是:"+Number)
    }
  }
})

• Define the Test01 method for calling by the parent component

2.3 index.js (js file of parent component)

Page({
    
    
  getChildComponent: function () {
    
    
    const child = this.selectComponent('.news');
    console.log('子组件实例为：', child);
    child.Test01(10)
  },
  onLoad: function (options) {
    
    
    this.getChildComponent()
  },
})

• The onLoad function is used to call the getChildComponent() function and use the this.selectComponent method. The parent component will obtain the
  child component instance object with class my-component, which is the this of the child component.
  • selector match selector syntax
    • ID selector: #the-id
    • Class selector (you can specify multiple consecutively): .a-class.another-class (the syntax used in this article)
    • Child element selector: .the-parent > .the-child
    • Descendant selector: .the-ancestor .the-descendant
    • Descendant selector across custom components: .the-ancestor >>> .the-descendant
    • Union of multiple selectors: #a-node,.some-other-nodes
• child.Test01 is a method in the child component, which is equivalent to this.Test01() in the child component.

3. Precautions

1. When getting the subcomponent instance is empty, you should consider whether the subcomponent is displayed.

        When the author used this method, the test case was successful, but the specific code to obtain the subcomponent instance was always empty. After groping for a long time, I found out that it can only be used when the subcomponent used in wxml is displayed, such as

<news  class="news" wx:if="{
    
    {true}}"></news>

It is possible to obtain subcomponent instances using

<news  class="news" wx:if="{
    
    {false}}"></news>

Because it is not displayed, the instance cannot be obtained.

Reference materials:
[Official Documentation of Mini Program]
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html
https://developers.weixin.qq.com/miniprogram/dev/ api/wxml/SelectorQuery.select.html