Value transfer communication between components (parent to child, child to parent, brother component to value)

---

Preface

There are three kinds of value transmission communication between components
1、 Father's son
2、 Son father
3、 Sibling components pass values

---

One 、 Father's son

Parent component ：<son :msg=“fatherMsg”></son>
Child components ：props:[‘msg’]

// Parent component 
<template>
	<div>
		<son :msg="fatherMsg"></son>
	</div>
</template>
<script> import son from './son' export default {
       data(){
       return {
       fatherMsg:' Parent component msg', } }, components:{
       son } } </script>


// Child components 
<template>
	<div>
		 Messages received by subcomponents ：{
   {msg}}
	</div>
</template>
<script> export default {
       props:['msg'], } </script>

Two 、 Son father

Parent component ：
<son @ Custom event name =“ Method ”></son>

Child components ：
props:[‘ Custom event name ’]
this.$emit( Custom event name , Data to be transmitted )

// Parent component 
<template>
	<div>
		<son @send="send"></son>
	</div>
</template>
<script> import son from './son' export default {
       components:{
       son }, methods:{
       send(msg){
       console.log(' Message received by parent component ：'+msg) }, }, } </script>


// Child components 
<template>
	<div>
    	<button @click="toFather"> Send to parent </button>
	</div>
</template>
<script> export default {
       props:['send'], methods:{
       toFather(){
       this.$emit('send',' Subcomponents msg') } }, } </script>

3、 ... and 、 Sibling components pass values

Through a transit （bus）：
import Vue from ‘vue’
export default new Vue;

A Brother's biography ：
import bus from ‘@/common/bus.js’
bus.$emit(‘toBorther’,this.msg)

B Brothers receive ：
import bus from ‘@/common/bus.js’
bus.$on(‘toBorther’,(data)=>{
this.msg=data
})

// Parent component 
<template>
  <div class="about">
    <!--  Sibling components pass values  -->
    <sister></sister>
    <brother></brother>
  </div>
</template>

<script> import sister from '../components/sister' import brother from '../components/brother' export default {
       data(){
       return{
       } }, components:{
       sister, brother }, } </script>


// transit （bus.js）
import Vue from 'vue'
export default new Vue;


//A Components （sister.vue）
<template>
	<div>
    	<button @click="send"> push parameter </button>
	</div>
</template>
<script> import bus from '@/common/bus.js' export default {
       data(){
       return{
       msg:" This is a A The data of " } }, methods:{
       send(){
      // push parameter  bus.$emit('toBorther',this.msg) } }, } </script>


//B Components （borther.vue）
<template>
	<div>
    	{
   {msg}}
	</div>
</template>
<script> import bus from '@/common/bus.js' export default {
       data(){
       return{
       msg:'', } }, mounted(){
       bus.$on('toBorther',(data)=>{
      // Receiving parameters  this.msg=data }) }, } </script>