Custom component -- communication between parent and child components

1. Communication between parent and child components 3 Ways of planting

• Attribute binding

It is used for the parent component to specify attribute setting data to the child component , You can only set json Compatible data

• Event binding

Used by child components to pass data to parent components , You can pass any data

• Get component instance

The parent component can also use this.selecteComponent（） Get sub component instance object

In this way, you can directly access any data and methods in the sub components

2. Attribute binding  

Property binding is used to pass values from parent to child , And can only pass ordinary types of data , Cannot pass method to child component .

// Parent component data node 
 data: {
        count:9
    },

// Parent component wxml structure 
<test2  count="{
   {count}}">
<button size="mini" slot="before"> Click on </button>
<input type="text" slot="after" style="background-color:rgb(112, 211, 211);"/>
</test2>

// Use 
// Subcomponents properties node 
 properties: {
        count:{
            type:Number,
            value:0
        }
    },

// Subcomponents wxml structure 
<view>
<slot name="before"></slot>
<view> This is the dividing line ——————————————————******</view>
<slot name="after"></slot>
<view>{
   {count}}</view>// Use 
</view>

3. Event binding

Event binding is used to pass values from child to parent , Can pass any type of data , The procedure is as follows ：

 

// Step one 
 syncCount(){
        console.log(' syncCount')
    },

// Step two ：
<test2  count="{
   {count}}" bind:sync="syncCount">
<button size="mini" slot="before"> Click on </button>
<input type="text" slot="after" style="background-color:rgb(112, 211, 211);"/>
</test2>


// Step three 
// Components wxml
<button type="primary" bindtap="addCount">+1</button>

// Components js
addCount(){
            this.setData({
                count:this.properties.count+1
            })
            this.triggerEvent('sync',{value:this.properties.count})
        }
    }

// Step four 
  syncCount(e){
        this.setData({
            count:e.detail.value
        })
    },

4. Get component instance

Can be called in the parent component this.selectComponent("class or id Selectors "), Get the instance object of the subcomponent , So as to directly access any data and methods of sub components . When calling, you need to pass in a selector , for example  this.selectComponent(".my-component")

 

// Parent component js
  getChild(){
        const child = this.selectComponent('.customA')
        // console.log(child)
        child.setData({
            count:child.properties.count+1// Call the setData Method 
        })
        child.addCount()// Call the addCount Method 
    },

Code results ：