Component communication is often used in front-end development. Today, let's summarize the communication of each component

1, Parent child component communication

Father to son (prop)

Pass from parent to child is mainly to define the prop attribute in the sub component and add the value to be passed in, for example:

//Subcomponents
//The template tag is omitted
<script>
    export default {
        data() {
            return {
                childrenMsg: 'aaaa'
            }
        },
        props: {
            parentMsg: {
                type:String,
                default(){
                }
            }
        }     
    }
</script>

Then, after the parent component introduces the registered component, use the field defined by prop = "field to be transferred in" in the label of the child component, such as:

//Parent component
<template>
  <div id="app">
    <children :parentMsg="parentMsg"></children>
  </div>
</template>
<script>
  import children from './blog/children'
  export default{
    components: {
      children
    },
    data() {
      return {
        parentMsg:"Parent component information"
      }
    },
  }
</script>

This is what it looks like:

Child to parent ($emit)

$emit('name to be passed', parameter) is mainly used to pass the child to the parent component. Just listen to this event in the parent component, for example:

//Subcomponents
<template>
    <div class="children">
        <button @click=sendMsg> Deliver information</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                childrenMsg: 'aaaa'
            }
        },
        methods: {
            sendMsg(){
                this.$emit('childrenMsg',this.childrenMsg)
            }
        },
    }
</script>

The button in the subcomponent binds the click event, using this$ Emit () sends the event name and parameters to be passed. Of course, multiple parameters can be passed

//Parent component
<template>
    <div class="parent">
        <children></children>
        <p>{{}}</p>
    </div>
</template>
<script>
    import children from './children'
    export default{
        component:{
            children
        }
    }
</script>

2, Provide, inject

I won't talk about this way of transmission between father and son. The method is the same as that in the first part.

The methods to be used here are the inject and provide attributes to communicate.

//Sun component
<template>
    <div class="grandSon">
        <div> This is the message from Grandpa node:{{provideMsg}}</div>
    </div>
</template>
<script>
    export default {
        inject:['provideMsg']
    }
</script>

The grandchild node only needs to define inject, and use the array to load the value to be received and use it directly

//Master assembly
<template>
  <div id="app">  
    <children></children>
  </div>
</template>

<script>
  import children from './blog/children'

  export default{
    components: {
      children
    },
    data() {
      return {
        someMsg:'someMsg!!'
      }
    },
    provide(){
      return{
        provideMsg:this.someMsg
      }
    },
  }
</script>

Operation results:

It should be noted here that after the value of provide is passed, even if the value of provide is changed again, the input will no longer receive the value provided after the change of provide. If you want to pass it in response, you need to use computed to pass it. See the official website of Vue for details( https://v3.cn.vuejs.org/guide/component-provide-inject.html#%E5%A4%84%E7%90%86%E5%93%8D%E5%BA%94%E6%80%A7)

3, Brother communication (event bus)

Since we are talking about the vue3 version, we can use the MIT library to complete the event bus function. We only need to install it, which is very convenient.
First create a file called eventbus JS file, the author recommends creating a directory of utils and putting the file in this directory for use.

//eventBus.js
//Import MIT
import mitt from 'mitt'
//Define an e mitt er to receive the return value of the MIT function call
const emitter = mitt() 
//Export emitter
export default emitter

The sending component calls emmitter The use of emit ('event name', parameter) is roughly the same as that of communication between child and parent components

//Send component
<template>
    <div class="eventBusSend">
        <button @click="emitterClick" >Event bus issue</button>
    </div>
</template>
<script>
  import emitter from '../utils/eventBus.js'

    export default {
        inject:['provideMsg'],
        methods: {
            emitterClick(){
                emitter.emit('event1',123456)
            }
        },
    }
</script>

//Receiving component
<template>
  <div id="app">  
    <children></children>
    <div>Information received using the event bus:{{emitterMsg}}</div>
  </div>
</template>
<script>
  import children from './blog/children'
  import emitter from './utils/eventBus'  
  export default{
    components: {
      children
    },
    data() {
      return {
        emitterMsg:""
      }
    },
    created() {
      emitter.on('event1',(info)=>{
        this.emitterMsg = info 
      })
    },
  }
</script>

This paper introduces three communication modes, which can roughly meet the daily needs. If there are deficiencies, you are welcome to point out.

above