Detailed explanation of the usage of $refs, $emit, $on, $once, $off in vue

<div >
  <child-a ref="child"></child-a>
  <button @click="getMyEvent">Click on the parent component</button>
<div>

<script>
  import ChildA from './'
  
  export default{
    components:{
      ChildA
    },
    data(){
      return {
        msg:'I am the data of the parent component'
      }
    },
    methods:{
      getMyEvent(){
        //Call the method of the child component, child is the name given by the above ref, emitEvent is the method of the child component.        this.$()
      }
    }
  }
</script>

<template>
  <button>Click me</button>
</template>
<script>
  export default{
    methods:{
      emitEvent(msg){
        ('Received data------'+msg)
      }
    }
  }
</script>

<template>
  <button @click="emitEvent">Click me</button>
</template>
<script>
  export default{
    data(){
      return{
        msg:'I am the data of the child component'
      }
    },
    methods:{
      emitEvent(){
        //Trigger the method through the button's click event, and then use $emit to trigger a custom method of my-event to pass the data.        this.$emit('my-event',)
      }
    }
  }
</script>

<template>  
  <div >
    <child-a @my-event="getMyEvent"></child-a>
    //The parent component executes a method by monitoring the my-event event, and then takes the value passed in the child component.  </div>
</template>
<script>
  import childA from './';
  export default {
    components:{
      childA
    },
    methods:{
      getMyEvent(msg){
       ('Receive data---'+msg);
       //Receive data, I am the data of the subcomponent      }
    }
  }
</script>

import Vue from 'vue';
export default new Vue();

<template>
  <div>
    <span>AComponents-{{msg}}</span>
    <input type="button" value="Passing component A data to B" @click="send">
  </div>
</template>
<script>
  import eventBus from './eventBus';
  export default{
    data(){
      return{
        msg:{
          a:'111',
          b:'222'
        }
      }
    },
    methods:{
      send(){
        eventBus.$emit('aevent',)
      }
    }
  }
</script>

<template>
  <div>
    <span>BComponents，AThe data transmitted is--{{msg}}</span>
  </div>
</template>
<script>
  import eventBus from './'
  export default {
    data(){
      return{
        msg:''
      }
    },
    mounted(){
      eventBus.$on('aevent',(val)=>{// Listen to the event aevent, and the callback function must use the arrow function.        (val);//Print the result; I am the data of component a.      })
    }
  }
</script>

<template>  
  <div>
    <childa></childa>
    <br/>
    <childb></childb>
  </div>
</template>
<script>
  import childa from './';
  import childb from './';
  export default{
    componets:{
      childa,
      childb
    },
    data(){
      return{
        msg:''
      }
    }
  }
</script>