Introduction to component communication in WeChat applet (code example)

This article brings you an introduction to component communication in WeChat mini programs (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

This article mainly talks about component communication

(1) The parent component passes the value to the child component:

 <header title=&#39;{{title}}&#39; bind:fn=&#39;fn&#39; id=&#39;header&#39;></header>

Passes the value to the child component through title='{{title}}' Pass parameters to sub-component

Sub-component receives parameters:

Component({
  properties: {
    title: {       // 属性名 type: Number, // 类型（必填）
      type: String,//目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
    },
    fn: {      
      type: Function,
    },
  },
  data: {
      
  },
  methods: {
    // 子组件调用父组件方法
    childFn() {
      console.log(this.data.title)
      this.triggerEvent("fn");
      //triggerEvent函数接受三个值：事件名称、数据、选项值  
    }
  }
})

methodsWhen using title, this.data.title can be obtained directly

through bind:fn='fn 'Passing methods to child components

Methods must also be received in properties. Define a new method in methods, this.triggerEvent("fn") to receive methods passed from parent components

(2) The parent component calls the child component data and methods:

First obtain the component in the parent component js onReady life cycle

onReady: function () {
    //获得popup组件
    this.header= this.selectComponent("#header");
},

For example, if you want to call a function method of the child component

 // 调用子组件方法
  fn(){
    this.header.fn() //子组件的方法
  },

If you call the subcomponent data, you can get the subcomponent data directly from this.header.msg

The above is the detailed content of Introduction to component communication in WeChat applet (code example). For more information, please follow other related articles on the PHP Chinese website!