I 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)

1. Parent component Vue code is as follows:

Father to son

Bind an attribute on the child component label of the parent component to mount the variable to be transferred. In the subcomponent, props can be used to receive data. Props can be an array or an object. The accepted data can be directly props: [attribute name] props: {attribute name: data type}

 <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>
123456789101112131415161718

2. The sub component son 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>
1234567891011121314151617

Subcomponents receive data through props
The first method

props: ['childCom']
1

The second method

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

The third method

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

II The child component passes values to the parent component

Son to father

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

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:

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

 <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>
1234567891011121314151617181920212223242526

2. The sub component son code is as follows:

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

 <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>
12345678910111213141516171819202122232425

3. Non parent-child parameter transmission (event bus)

That is, brothers pass values

Via main JS initializes a global $bus, and the party sending the event passes $bus$ Emit ("event name", passed parameter information) is sent to the party receiving the event through B U S bus. bus. On ("event name", parameter) receives the delivered event
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. Initialize and create $bus globally

Directly in the project's main JS initialize $bus:

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

Note that this initializes a global event bus.

2. Send event

$bus.$emit("aMsg", 'come from A Message for page');
<!-- A.vue -->
<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)
<!-- IncrementCount.vue -->
<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>