Several ways for Vue to achieve communication between components (multiple scenarios)

The following are the communication methods between Vue components that I have used in development. Different scenarios use different methods, which basically meet the communication needs in all development scenarios. Starting with the simplest example, I will explain how to use it. I will start without further ado. It is full of dry goods, and it is recommended to read it.

1. Props

Parent >>> Child (Props)

When a component is introduced into another component, a "parent-child relationship" is formed. The current component is the "parent" and the introduced component is the "child". For example, the current component (parent) communicates with the child component through ":message" in the parent component.

<template>
    <div class="parent-box">
        <div>
            <div>I am the parent page</div>
            <div>{{message}}</div>
        </div>
        <children :message="toChildrenMsg"></children>
    </div>
</template>
 
<script>
import Children from './Children.vue' //Introduce subcomponents to the current page export default {
    name:"Parent",
    components:{
        Children
    },
    data(){
        return {
            message:'I am the content of the parent page',
            toChildrenMsg: 'Content passed from the parent page to the child page'
        }
    }
}
</script>

The child component receives it through props . Note that the name of the object received in the child component props must be consistent with the name bound to the child component in the parent component. The current example is "message". The value in the props can be used in the component return in this way.

<template>
    <div class="children-box">
        <div>
            <div>I am a subpage</div>
            <div>{{message}}</div>
        </div>
    </div>
</template>
 
<script>
export default {
    name:"Children",
    props:{
        message:{
            type:String, //Type judgment default:'' //Default value}
    }
}
</script>

The child component receives the content passed by the parent component, and the effect is as shown in the following figure:

child >>> parent ($emit)

In the child component, communicate with the parent component through the this.$emit() method. As shown below, click the trigger event and execute this.$emit('fromChildMethod') to trigger the fromChildMethod method of the parent component.

<template>
    <div class="children-box">
        <div>
            <div>I am a subpage</div>
            <div>{{message}}</div>
            <div><span @click="toParentMethod">Click to trigger parent page event</span></div>
        </div>
    </div>
</template>
 
<script>
export default {
    name:"Children",
    props:{
        message:{
            type:String,
            default:''
        }
    },
    methods:{
        toParentMethod(){
            this.$emit('fromChildMethod')
        }
    }
}
</script>

Bind the fromChildMethod method to the child component of the parent component, listen to the method, and when the method is triggered, execute the corresponding fromChild method in the parent component.

<template>
    <div class="parent-box">
        <div>
            <div>I am the parent page</div>
            <div style="font-size:12px;">{{message}}</div>
            <div style="font-size:12px;color:red">{{fromChildMsg}}</div>
        </div>
        <children :message="toChildrenMsg" @fromChildMethod="fromChild"></children>
    </div>
</template>
 
<script>
import Children from './Children.vue'
export default {
    name:"Parent",
    components:{
        Children
    },
    data(){
        return {
            message:'I am the content of the parent page',
            toChildrenMsg: 'Content passed from the parent page to the child page',
            fromChildMsg:''
        }
    },
    methods:{
        fromChild(){
            this.fromChildMsg = 'Method triggered by child page' //Listen to the method triggered by the child component and display the content}
    }
}
</script>

When the corresponding span of the child component is clicked, the method is triggered and the parent component is notified.

Summary: from parent to child, props; from child to parent, this.$emit(); the trigger and listener names must be consistent.

2. Bus event bus

In real scenarios, components not only have "parent-child" relationships, but also "brother" relationships and cross-level components, etc. At this time, props and $emit may not be applicable. At this time, it appears, that is, Bus (event bus), which is also applicable to parent-child components.

The Bus triggers $emit, monitors $on, and closes $off, mainly using $emit and $on.

First, create a new folder bus in the project, which contains an index.js file, create a new Vue instance, and then export the module.

Next, import this new Vue instance, that is, bus. There are two common import methods, one is global import and the other is local import (each component needs to be imported once). The following is a global import. In main.js, the bus is used as the prototype method of the current Vue instance, which can be called directly in each component through this.bus.

import Vue from 'vue'
import App from './App'
import bus from './bus/index'
Vue.prototype.bus = bus
 
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

The following shows the process of implementing bus communication. The scenario is father-son. Similarly, the usage of brothers and cross-level is similar:

Parent component communicates with Children component, triggered by this.bus.$emit()

<template>
    <div class="parent-box">
        <div>
            <div>I am the parent page</div>
            <div @click="toChildBus"><span>Communicate to child components</span></div>
        </div>
        <children></children>
    </div>
</template>
 
<script>
import Children from './Children.vue'
export default {
    name:"Parent",
    components:{
        Children
    },
    methods:{
        toChildBus(){
            let val = 'Parent component communicates with child component'
            this.bus.$emit('toChild',val) //val is the value passed, not required}
    }
}
</script>

The Children component listens to the events triggered by the Parent component (binding and listening in the mounted phase). Note that the event names must be consistent. Listen through this.bus.$on(). When the bus listens to the trigger method, get the passed value (you can also execute custom methods in it).

<template>
    <div class="children-box">
        <div>
            <div>I am a subpage</div>
            <div style="font-size:12px;color:blue;">{{fromParentMsg}}</div>
        </div>
    </div>
</template>
 
<script>
export default {
    name:"Children",
    data(){
        return {
            fromParentMsg:''
        }
    },
    mounted(){
        this.bus.$off('toChild')
        this.bus.$on('toChild',val=>{   
            this.fromParentMsg = val //This is a copy operation, and the corresponding method can also be executed inside it})
    }
}
</script>

Effect picture:

Summary: The communication between father and son, brothers, and cross-level (grandparents, grandchildren, etc.) is written in the same way, so I will not give examples one by one. They are all triggered by this.bus.$emit(), listened to by this.bus.$on(), and perform corresponding operations. Remember: the trigger and listening names must be the same!

3. Vuex state management library

Vuex is equivalent to a warehouse. You can put some things in the warehouse and keep the status when it is stored. You can modify it and take it out when needed. It is a global state. This time we will only talk about how to use vuex for communication without going into its principles.

Install vuex

npm install vuex --save

Here I create a new folder named store, which contains an index.js file, create a Vuex.Store instance, and then export this instance. From the figure, you can clearly see the general structure and elements of the store. I won’t go into details. There are countless articles about vuex, and you can learn about it yourself. Here I mainly talk about the general usage.

Import it globally in mian.js and then use it directly.

import Vue from 'vue'
import App from './App'
import router from './router'
import bus from './bus/index'
import store from './store/index'
 
Vue.config.productionTip = false
Vue.prototype.bus = bus
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

Method 1, this.$store.state.xxx, operates on the state directly, and stores the value in the store during the mounted phase of a component. Of course, you can also operate in the method you want.

<template>
    <div class="parent-box">
        <div>
            <div>I am the parent page</div>
        </div>
        <children></children>
    </div>
</template>
 
<script>
import Children from './Children.vue'
export default {
    name:"Parent",
    components:{
        Children
    },
    data(){
        return {
            fromChildMsg:''
        }
    }
    mounted(){
        this.$store.state.msg = 'Parent component stored' //Save it here through method 1}
}
</script>

Other components are taken from the store and can of course also be modified.

<template>
    <div class="children-box">
        <div>
            <div>I am a subpage</div>
            <div @click="fromStore"><span>Get from the store</span></div>
            <div>{{fromStoreMsg}}</div>
        </div>
    </div>
</template>
 
<script>
export default {
    name:"Children",
    data(){
        return {
            fromStoreMsg:''
        }
    },
    methods:{
        fromStore(){
            this.fromStoreMsg = this.$store.state.msg
        }
    }
}
</script>

Effect picture:

Method 2: retrieve through this.$store.getters.xxx and mapGetters.

// store/index.js
getters:{
    getMsg:state=>{
    return state.msg
  }
},
 
 
//Get this.$store.getters.getMsg in the component
 
//You can also use mapGetters import { mapGetters } from 'vuex'
computed: {
 ...mapGetters(['getMsg'])
},

The data stored in the store can be stored using mutations and actions (which can be asynchronous). I will not go into details here. If you are interested, you can study it yourself.

4. Router

You can pass values ​​through dynamic routing and routing jump, such as this.$router.push({path:'xxx',query:{value:'xxx'}}), pass values ​​when jumping, and get the passed parameters through this.$route.params.value and this.$route.query.value. This method has limitations. It can only obtain values ​​when components jump to each other. You cannot obtain values ​​by refreshing the page directly after the jump. Use it according to the situation.

5. Cache

sessionStorage, localStorage, cookies

In addition to bus and store, another common way for multiple components to communicate is cache. When the same window is not closed, other components under the window can obtain the values ​​stored in the cache. Use sessionStorage.setItem(key, value) and localStorage.setItem(key, value) to store the values. Other components can get them through sessionStorage.getItem(key) and localStorage.getItem(key). Multiple pages share cached data, and the data will not be destroyed when the page is refreshed. The cache can be removed by sessionStorage.removeItem(key) and localStorage.removeItem(key). There are many applicable scenarios.

Summary: This article briefly introduces several commonly used communication and value transfer methods in Vue components, considering different scenarios to use different methods to improve development efficiency and reduce the occurrence of bugs.

This concludes this article about several ways (in various scenarios) of implementing inter-component communication in Vue. For more relevant Vue component communication content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!