Home > WeChat Applet > Mini Program Development > Introduction to component communication in WeChat applet (code example)

Introduction to component communication in WeChat applet (code example)

不言
Release: 2018-10-29 16:55:36
forward
2921 people have browsed it

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>
Copy after login

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函数接受三个值:事件名称、数据、选项值  
    }
  }
})
Copy after login

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");
},
Copy after login

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

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

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!

Related labels:
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Issues
Using multiple Vue components in one file
From 1970-01-01 08:00:00
0
0
0
Share React components between projects
From 1970-01-01 08:00:00
0
0
0
Recursion in single file components in Vue.js 3
From 1970-01-01 08:00:00
0
0
0
Leverage VueJS components in PHP
From 1970-01-01 08:00:00
0
0
0
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template