1, Pass parent component to child component

Parent components communicate with child components through props attribute
Data is one-way flow parent - > child (if props data is modified in the child component, it is invalid, and there will be a red warning)

Parent component Vue code is as follows:

 <template>
   <div class="parent">
     <h2>{{ msg }}</h2>
     <son :fa-msg="msg"></son> <!-- Subcomponent binding faMsg variable,Watch the hump-->
 </div>
 </template>
 <script>
 import son from './Son' //Introducing sub components
 export default {
   name: 'HelloWorld',
   data () {
     return {
       msg: 'Parent component',
     }
   },
   components:{son},
 }
 </script>

The sub component code is as follows:

 <template>
   <div class="son">
     <p>{{ sonMsg }}</p>
     <p>Content received by sub component:{{ faMsg }}</p>
   </div>
 </template>
 <script>
 export default {
   name: "son",
   data(){
     return {
       sonMsg:'Subcomponents',
     }
   },
   props:['faMsg'],//Receive psMsg value
 }
</script>

Subcomponents receive data through props
The first method

props: ['childCom']

The second method

props: {
    childCom: String //The string type is specified here. You will be warned if the types are inconsistent
}

The third method

props: {
    childCom: {
        type: String,
        default: 'sichaoyun' 
    }
}

2, The child component passes values to the parent component
Pass value through binding event and $emit

vue2.0 only allows one-way data transmission. We change the data of the component through the departure event

1. The parent code of the parent component is as follows:

 <template>
   <div class="parent">
     <h2>{{ msg }}</h2>
     <p>Content received by parent component:{{ username }}</p>
     <son psMsg="I'm your father" @transfer="getUser"></son> 
      <!-- Triggered by monitoring sub components transfer event,Then call getUser method -->
   </div>
 </template>
 <script>
 import son from './Son'
 export default {
   name: 'HelloWorld',
   data () {
     return {
       msg: 'Parent component',
       username:'',
     }
   },
   components:{son},
   methods:{
     getUser(msg){
       this.username= msg
     }
   }
 }
 </script>

The parent component accepts the parameters passed by the child component by binding custom events

2. The sub component son code is as follows:

 <template>
   <div class="son">
     <p>{{ sonMsg }}</p>
     <p>Content received by sub component:{{ psMsg }}</p>
     <!--<input type="text" v-model="user" @change="setUser">-->
     <button @click="setUser">Value transmission</button>
   </div>
 </template>
 <script>
 export default {
   name: "son",
   data(){
     return {
       sonMsg:'Subcomponents',
       user:'The content of passing from son to father'
     }
   },
   props:['psMsg'],
   methods:{
     setUser:function(){
       this.$emit('transfer',this.user)//Trigger the transfer method, this User is the data passed to the parent component
     }
   }
 }
 </script>

The child component triggers a custom event on the parent component through $emit and sends parameters

3, Non father son transmission parameter
Suppose you have two Vue components that need to communicate: A and B. the click event is bound on the button of component A, send a message, and component B receives it.

1. $bus, global initialization
   Directly in the project's main JS initialize $bus:

// main.js
window.$bus=new Vue();

Note that this initializes a global bus.

1. Send event
   $bus.$emit("aMsg", 'message from page A');

<template>
   <button @click="sendMsg()">-</button>
</template>

<script> 
//import $bus from "../bus.js";
export default {
 methods: {
   sendMsg() {
     $bus.$emit("aMsg", 'come from A Message for page');
   }
 }
}; 
</script>

Next, we need to receive this message in page B.

3. Receive events

$bus.$on("event name", callback)

<template>
 <p>{{msg}}</p>
</template>

<script> 
//import $bus  from "../bus.js";
export default {
 data(){
   return {
     msg: ''
   }
 },
 mounted() {
   $bus.$on("aMsg", (msg) => {
     // Message from A
     this.msg = msg;
   });
 }
};
</script>

1. Parent to child:
Bind an attribute on the child component label of the parent component to mount the variable to be transferred. In the subcomponent, props is used to receive data. Props can be an array or an object. The accepted data can be directly used by bus$ Off ("event name")

2. Son to father:

vue2.0 only allows one-way data transmission. We change the data of the component through the departure event
On the child component label of the parent component, you can bind custom events to accept the events passed by the child component. The child component triggers a custom event on the parent component through $emit and sends parameters (the first is the attribute value to be changed and the second is the parameter to be sent)

3. Sibling component value transfer:

Via main JS initializes a global b u s , stay hair give matter piece of one square through too bus, passed by the party sending the event Bus, the party sending the event through bus e m i t ( " matter piece name " ， pass Deliver of ginseng number letter interest ) hair give ， stay meet collect matter piece of one square through too emit("event name", passed parameter information) is sent to the party receiving the event through emit("event name", transmitted parameter information) is sent to the party receiving the event through bus o n ( " matter piece name " , ginseng number ) meet collect pass Deliver of matter piece B u s . on("event name", parameter) receives the delivered event Bus on("event name", parameter) receives the delivered event bus on("event name")