Value transfer between parent and child components of wechat applet

Pass values between parent and child components

There are two types of value transfer between components , One is Pass value from father to son , The other is Pass from son to father

Let's talk about the general difference first …

difference ：

1. The parent passes values to the child using Attribute binding , Sub components Of properties object Receive the value passed by the parent component
2. When a child passes a value to a parent, it uses Custom events , The parent component uses the... In the custom event Event object e To receive the value passed by the sub component

Pass value from father to son

First we create a in our applet components Folder Used to store our sub components . After the creation, we can components Folder to create our sub components child , Of course, any name can be created , I created here child , Here's the picture ：

After the creation, it is introduced , Put this Child components child Introduced to us Parent component index Go to the home page . Here's an explanation , I am here altogether It was created. Two pages , One is pages Node under index Routing page , as well as components Node under child Components .

So how do we introduce ？（ The principle is in the parent component json In the document usingComponents Under the node introduce ） as follows ：

{
    
  "usingComponents": {
    
    "child":"../../components/child/child"
  }
}

How to put Child components The content of Render to parent component How about it ？… ：

It's also very simple. ： When we introduced it above , Look at the code above ： The custom name given to the component is child that When we render stay index Parent component Write a group in <child><child> Labels can be , You can render the sub components to Parent component …

At this point, we have a parent-child page , Then you can transfer values …

We have data in the parent component data Two data are defined in ,name:' Zhang San ', age:23, Pass this data to Child components child

Here we have three steps ：

1. stay child In the label Use attribute binding Bind the value of the parent component <child name="{ { name }}" age="{ { age }}" ></child>, At this point, the operation of the parent component has ok 了 , Next, let's look at the operation of sub components …
2. In subcomponent js Of documents properties Object to receive the value passed by the parent component

  //  Accept the value passed by the parent component 
  properties: {
    
    name:{
    
      type:String,
      value:' I'm the default ： Apple '
    },
    age:{
    
      type:Number,
      value:' I'm the default ： 100'
    }
  },

3. At this point, the subcomponents child It's been received The value passed by the parent component , We can do it in Subcomponents wxml On the page Refer to this value to see if the transfer is successful

<!--  Pass value from father to son  -->
<view>
   This is the value passed by the parent component  name: {
   { name }}-----age {
   {age}}
</view>

index Parent page The results are as follows ：

Obviously the delivery was successful … >^<

Next, let's talk about the value transfer from the child to the parent

Pass from son to father

Let's start with the subcomponent data In the data Define a data msg

  data: {
    
    msg:' I am the value of the subcomponent '
  },

Next, start to transfer values , There are two kinds of value transfer time ,
The first is in the life cycle of the build , That is, as soon as the page is loaded, the value in the component will be passed
The second way is to pass values through event binding

Let's start with the second ：（ The way of time binding ）：

1. On sub components wxml Put a button in the middle , And bind him to an event send

<!--  Click the button to transfer the value to the parent component  -->
<button bindtap="send"> Click the button to transfer the value to the parent component </button>

2. stay child.js Define this in send , And write the code for value transmission ：

 methods: {
    
    send(){
    
      this.triggerEvent('send',this.data.msg)
    }
  },

Value transfer uses ：this.triggerEvent() , In the above code send Is the name of the custom event passed to the parent component , Next, define this custom event in the parent component bindsend="send"

<child  name="{
    { name }}" age="{
    { age }}" bindsend="send"></child>

When it's defined , stay Parent component js In file , Define it send , And give send Method , Pass a Event object e

 //  The parent component accepts the value passed by the child component 
  send(e){
    
    console.log(e.detail);
  },

The values passed by the subcomponents are stored in e.detail in …