How to transfer values ​​​​and call methods between parent and child components in a mini program? (Method summary)

青灯夜游
Release: 2021-12-09 10:03:18
forward
4667 people have browsed it

How to transfer values ​​​​and call methods between parent and child components in a mini program? The following article will summarize and share with you some methods of value transfer and method calling between parent and child components of WeChat applet. I hope it will be helpful to you!

How to transfer values ​​​​and call methods between parent and child components in a mini program? (Method summary)

Custom component encapsulation

Register a tab component

Create a tabs under the components folder folder, click the tabs to the right and you will see a new component. After clicking on a new component, the registration is successful.

How to transfer values ​​​​and call methods between parent and child components in a mini program? (Method summary)

Component usage

Import the component on the json page of the page that needs to use the component, like the HTML tag under wxml Just use it.

How to transfer values ​​​​and call methods between parent and child components in a mini program? (Method summary)

<tabs></tabs>
Copy after login

What is a parent component and what is a child component? The parent component is the component that needs to introduce other components into the page, and the child component is the component that is introduced. The parent passes values ​​to the child through attributes, while the child passes values ​​to the parent through methods.

Parent component passes value to child component

Parent component passes value through properties

<childEle childParams="{{params}}"></childEle>
Copy after login

Child component receives through properties:

properties: {
	childParams: { type: String }
}
Copy after login

The child component calls the parent component method

This method can also be understood as a method for the child component to pass parameters to the parent component.

The parent component defines the method, childFun is the method name in the child component, and fun is the method name in the parent component. We call fun through chidlFun.

<childEle childParams="{{params}}" bind:childFun="fun"></childEle>
Copy after login

Parent component method:

childFun(e){
	console.log(&#39;我是父组件的方法&#39;, e)
}
Copy after login

The method of the parent component is called when the button of the child component is clicked to execute clickFun

clickFun(){
	this.triggerEvent(&#39;childFun&#39;);//如果需要传递参数,直接写在triggerEvent的参数里即可
}
Copy after login

The parent component calls the child component Method

<childEle id="childEle" childParams="{{params}}" bind:childFun="fun"></childEle>
Copy after login

Get the childEle element in the onReady life cycle of the parent component

onReady(){
	this.childEle = this.selectComponent(&#39;#childEle&#39;);
}
Copy after login

The click event of the parent component childF calls the event of the child component:

<view bindtap="childF">我是父组件的点击事件</view>
Copy after login

The parent component triggers the method of the child component:

childF(){
	this.childEle.foo()
}
Copy after login

The foo here is the method of the child component.

[Related learning recommendations: 小program development tutorial]

The above is the detailed content of How to transfer values ​​​​and call methods between parent and child components in a mini program? (Method summary). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:juejin.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template