Vue2.0 - Summary of communication and data transfer methods between components (with examples)

Communication between components - transfer data

The parent component passes data to the child component. The child component needs to set props to declare its expected data. If the data passed has' - ', the child component should accept it in the form of a small hump:

<div id="app">
    <aaa></aaa>         
</div>
<template id='A'>
    <div>
        <h1>A assembly{{num}}</h1>
        <bbb :num='num'></bbb>
    </div>
</template>
<template id='B'>
    <div>
        <h1>B assembly{{num}}</h1>
    </div>
</template>
<script>
    var vm=new Vue({
        el:'#app',
        components:{
            'aaa':{
                template:'#A',
                data:function(){
                    return {
                        num:1
                    }
                },
                components:{
                    'bbb':{
                        template:'#B',
                        props:['num']
                    }
                }
            }
        }
    })
</script>

If the data passed is of reference type, the parent-child component can be controlled in both directions

<div id="app">
    <aaa></aaa>         
</div>
<template id='A'>
    <div>
        <input type="text" v-model="content.num" />
        <h1>A assembly{{content.num}}</h1>
        <bbb :content='content'></bbb>
    </div>
</template>
<template id='B'>
    <div>
        <input type="text" v-model="content.num" />
        <h1>B assembly{{content.num}}</h1>
    </div>
</template>
<script>
    var vm=new Vue({
        el:'#app',
        components:{
            'aaa':{
                template:'#A',
                data:function(){
                    return {
                        content:{
                            num:1
                        }
                    }
                },
                components:{
                    'bbb':{
                        template:'#B',
                        props:['content']
                    }
                }
            }
        }
    })
</script>

To get the data of the parent component, the child component can also use $parent

var vm=new Vue({
    el:'#app',
    components:{
        'aaa':{
            template:'#A',
            data:function(){
                return {
                    content:{
                        num:1
                    }

                }
            },
            components:{
                'bbb':{
                    template:'#B',
                    data:function(){
                        return {
                            content:{
                                num:null
                            }
                        }
                    },
                    mounted(){
                        this.content.num=this.$parent.content.num
                    }
                }
            }
        }
    }
})

this object on component and instance has parent,parent,children,$root, which forms viewmodel chain. Theoretically, data between any two components can be called each other

Child component changes parent component data: the parent component passes its own method of changing data to the child component call:

<div id="app">
    <aaa></aaa>
</div>
<template id="aaa">
    <div>            
        <p>This is my father.(A)</p>
        <p>This is what my son said to me:{{msg}}</p>
        <hr>
        <bbb :tell-dady="hearSonWord"></bbb>
    </div>
</template>

<template id="bbb">
    <div>  
        <p>This is my son.(B)</p>
        //What to say to Dad:<input type="text" v-model="msg">{{msg}}
    </div>
</template>
// The parent component can pass its own method to the child component to call, and the child component can change the data of the parent component
<script>
    Vue.component("bbb",{
        template:"#bbb",
        props:['tellDady'],
        data:function(){
            return {
                msg:''
            }
        },
        watch:{
            msg:function(){
                this.tellDady(this.msg)
            }
        },
        methods:{

        }

    })

    Vue.component("aaa",{
        template:"#aaa",
        data:function(){
            return {
                msg:''
            }
        },
        methods:{
            hearSonWord:function(word){
                this.msg = word
            }
        }
    })

    new Vue({
        el:"#app"
    })
</script>

The child component changes the data of the parent component: the parent component can also bind an event to the child component. The event handler can be a method of the parent component. When the child component triggers the event itself, it is equivalent to calling the method of the parent component:

<div id="app">
    <aaa></aaa>
</div>
<template id="aaa">
    <div>            
        <p>This is my father.(A)</p>
        <p>This is what my son said to me:{{msg}}</p>
        <hr>
        <bbb @tell-dady="hearSonWord"></bbb>
    </div>
</template>

<template id="bbb">
    <div>  
        <p>This is my son.(B)</p>
        //What to say to Dad:<input type="text" v-model="msg">{{msg}}
    </div>
</template>
<script>
    Vue.component("bbb",{
        template:"#bbb",
        data:function(){
            return {
                msg:''
            }
        },
        watch:{
            msg:function(){
                this.$emit("tell-dady",this.msg)
            }
        },
        methods:{

        }

    })

    Vue.component("aaa",{
        template:"#aaa",
        data:function(){
            return {
                msg:''
            }
        },
        methods:{
            hearSonWord:function(word){
                this.msg = word
            }
        }
    })

    new Vue({
        el:"#app"
    })
</script>

When the parent component obtains the data of the child component, it can use $children or ref:

<div id="app">
    <father></father>
</div>
<template id='Father'>
    <div>
        <button @click='get'>get</button>
        <p></p>
        <son ref='one'></son>
        <son></son>
        <son></son>
    </div>
</template>
<template id='Son'>
    <div>
        <input type="text" v-model='msg'/>
    </div>
</template>
<script>
    Vue.component('son',{
        template:'#Son',
        data:function(){
            return {
                msg:''
            }
        },
    })
    Vue.component('father',{
        template:'#Father',     
        methods:{
            get:function(){
                console.log(this.$refs.one.msg)
            }
        }
    })
    var vm=new Vue({
        el:'#app'
    })
</script>

Non parent-child component communication: event bus: (applicable to active data feeding)

Parent child component communication is also available, but not necessary

<div id="app">
    <aaa></aaa>
    <bbb></bbb>
</div>
<template id='aaa'>
    <div>
        <input  type="text" @keydown.enter='change'/>
    </div>
</template>
<template id='bbb'>
    <div class='box' :style="{background:color}">
    </div>
</template>
<script>
    var bus=new Vue() //Create an empty Vue instance as the event bus
    Vue.component('aaa',{
        template:'#aaa',
        data:function(){
            return {

            }
        },
        //Trigger the function in bus to the data party and pass the value
        methods:{
            change:function(e){
                console.log(e.target.value)
                bus.$emit('a-give',e.target.value)
            }
        }
    })
    Vue.component('bbb',{
        template:'#bbb',
        data:function(){
            return {
                color:'red'
            }
        },
        //The component receiving the data binds the function in the hook function
        mounted:function(){
            let that = this
            bus.$on('a-give',function(res){
                that.color=res
            })
        }
    })
    var vm=new Vue({
        el:'#app'
    })
</script>

Tags: Vue

Posted on Wed, 01 Apr 2020 15:01:50 -0700 by RIRedinPA