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'], // Like data equally ,prop
Can be used in templates // It can also be found in vm Image in the instance “this.message” Use like this 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 the props Pass to subcomponent , But pay attention to this way prop 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) Listening 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 the total() Event occurred , adopt emit 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 .