Vue component value transfer: a common value transfer method between a child component and a parent component and a sibling component

preface

The previous part introduces my understanding of vue componentization and the way that parent components pass values to child components. This part introduces the common ways that child components pass values to parent and brother components

catalogue

  • The child component passes values to the parent component
  • Value transfer mode between any components

text

  • The child component passes values to the parent component

Key knowledge points: $emit

<div id="app">
        <child-div @a='handleTotal'></child-div>
        {{total}}
    </div>
    <script>
        //Define subcomponents
        Vue.component('child-div',{
            data(){
                return{
                    counter:0,
                }
            },
            template:'<span @click="handleCounter">I'll add one{{counter}}</span>',
            methods:{
                //When clicking, add 1 to the child component and 2 to the parent component
                handleCounter(){
                    this.counter ++
                    console.log('###########');
                    this.$emit('a',2)
                }
            }
        })
        new Vue({
            el:'#app',
            data:{
                total:0,
             },
            methods:{
                handleTotal(e){
                    console.log('@@@@@@@@@@@');
                    console.log(e);
                    this.total+=e
                }
            }
        })
    </script>

Analysis: define the child component and the click event of the child component. The child component triggers the $emit method through the click event to pop up the a method to the parent component. The parent component defines the handleTotal method by listening to the a method, so that the parent component receives the value transmitted by the child component. In this way, the effect of adding one child component and two parent components is realized.

A pit encountered here: Vue I used JS version is https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js , the method names registered in $emit() that pop up to the parent component must all be in lowercase letters. This effect cannot be achieved as long as there are uppercase letters in the method name, but there will be no error.

  • Value transfer mode of any component

Key knowledge points: event bus

For communication between any two components, event bus (an empty vue instance) is needed to trigger and monitor events, so as to realize the communication between components. Including parent-child, brother, and cross level components can be used.

 <div id="app">
        <data-a></data-a>
        <data-b></data-b>
        <data-c></data-c>
    </div>
    <template id="a"><div>
        <button @click='atoC'>A Pass data to C</button>
        My name is:{{name}}</div>
    </template>
    <template id="b"><div>
        <button @click='btoC'>B Pass data to C</button>
        My age is:{{age}}</div>
    </template>
    <template id="c"><div>
        <span>I accept the parameters</span>
        {{name}}========={{age}}</div>
    </template>
    <script>

        var Event = new Vue();
        var a = Vue.component(
            'data-a', {
            template: '#a',
            data() {
                return {
                    name: 'Tom'
                }
            },
            methods: {
                atoC() {
                    // console.log('aaaaaaaaaaaaaaaaaaaa');
                    Event.$emit('data-a', this.name)
                    // console.log('atoc success');
                }
            }
        }
        )
        var b = Vue.component(
            'data-b', {
            template: '#b',
            data() {
                return {
                    age: 20
                }
            },
            methods: {
                btoC() {
                    Event.$emit('data-b', this.age)
                }
            }
        }
        )
        var c = Vue.component(
            'data-c', {
            template: '#c',
            data() {
                return {
                    name: 'name',
                    age: 'age'
                }
            },
            mounted() {
                // console.log('@@@@@@@@@@@@@@');
                Event.$on(
                    'data-a', name => {
                        this.name = name;//Arrow functions do not produce new this,If you don't use the arrow function here, this Reference Event
                    }
                )
                Event.$on(
                    'data-b', age => {
                        this.age = age;
                    }
                )
            }
        }
        )
        new Vue({
            el:'#app',
            components:{
                'data-a':a,
                'data-b':b,
                'data-c':c
            }
        })

Analysis: define three abc components and register a global Event bus var Event = new Vue(); Then, when a passes a value to c, it calls $emit (Event name, data) to send data through Event, and c component sends data through Event$ On (Event name, data = > {}) receives data.

It is equivalent to registering an event bus, saving it and calling it when the event is triggered. Define a class to handle events and mount it on this of vue instance to register and trigger events. You can also extend some event management.

 

 

 

 

Tags: Vue

Posted by werty37 on Wed, 04 May 2022 17:16:00 +0300