The scope between component instances is independent, This means that the data of the parent component should not be directly referenced within the template of the child component, But communication between parent and child components is required: Parent to pass data to child, A child component needs to inform the parent of what happens inside it.



prop Is a custom property used by the parent component to pass data. Subcomponents need to be explicitly used props Option declaration “prop”:
Vue.component('child', { // statement props props: ['message'], // Just like data equally,prop
Can be used in templates // It can also be found in vm Image in Example “this.message” Use this way template: '<span>{{ message
}}</span>' })
An example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Multi layer component communication</
title> </head> <body> <div id="app"> <my-parent :imgtitle='title' :imgsrc='img'>
</my-parent> </div> <template id="my_img"> <img :src="imgsrc" width="200"> </
template> <template id="my_title"> <h2>{{title}}</h2> </template> <template id=
"my_parent"> <div> <child1 :imgsrc="imgsrc"></child1> <child2 :title="imgtitle">
</child2> </div> </template> <script src="js/vue.min.js"></script> <script>
//1. Instances of subcomponents let Child1 = Vue.extend({ template:'#my_img', props:['imgsrc'] });
let Child2 = Vue.extend({ template:'#my_title', props:['title'] }); // Register parent component
Vue.component('my-parent',{ props:['imgtitle','imgsrc'], components:{ 'child1'
:Child1,'child2':Child2 }, template:'#my_parent' }); new Vue({ el:'#app',
data:{ title:' I am very handsome', img:'img/01.jpg' } }); </script> </body> </html>
You can see that the data passes through theprops Pass to subcomponent, But pay attention to this wayprop The default is one-way binding,
When the properties of the parent component change, Transmit to sub assembly, But not the other way around. This is to prevent the child component from inadvertently modifying the state of the parent component.

Then the child component passes the data to the parent component, By customizing events.

each Vue All instances implement event interface(Events interface), Namely:

*
Use $on(eventName) Monitoring events

*
Use $emit(eventName) Trigger event

The parent component can be used directly where the child component is used v-on To listen for events triggered by subcomponents.

An example, Once thetotal() Incident, adoptemit Method to trigger the parent component.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Custom events for
</title> </head> <body> <div id="app"> <my-btn @total="allcounter()"></my-btn> <
my-btn @total="allcounter()"></my-btn> <my-btn @total="allcounter()"></my-btn> <
my-btn @total="allcounter()"></my-btn> <my-btn @total="allcounter()"></my-btn> <
my-btn @total="allcounter()"></my-btn> <p> All the buttons have been clicked{{totalCounter}} second</p> </div>
<template id='my_btn'> <button @click="total()"> Click.{{counter}} second</button> </
template> <script src="js/vue.min.js"></script> <script> Vue.component('my-btn'
,{ template:'#my_btn', data(){ return{ counter:0 } }, methods:{ total(){ this
.counter +=1; // Subcomponent notification outside, I called this method this.$emit('total'); } } }); new Vue({ el:
'#app', data: { totalCounter:0 }, methods:{ allcounter(){ this.totalCounter += 1
; } } });</script> </body> </html>
The running result is that the click between subcomponents does not affect each other, Parent component total hits increase.