Do you know two common communication methods of Vue?

Vue component development is a very wonderful process, because it reduces the coupling between codes and improves reusability, which is directly good news for us developers.

However, components are components, and there are several different relationships between components. Different relationships require corresponding communication methods. For example, the relationship diagram between components is like the one below. There are more components than these, so how should these complex component communications be handled?

Next, I will introduce two common component communication methods of Vue.

Parent-child communication "props / $emit"

From father to son

I want to pass data from the parent component to the child component, that is, from the app component to the A component in the figure above. I can first define an array in the App.vue component, and then bind it to the child component through v-bind.

 < template >
 < div id = "app" >
 < Child : ancient = 'ancient' />
 </ div >
 </ template >

 < script >
 import Child from './views/Child.vue'
 export default {
 data ( ) {
 return {
 ancient : [ 'The moon shines brightly before the bed' , 'It looks like frost on the ground' , 'Looking up at the bright moon' , 'Looking down at my hometown' ]
 }
 } ,
 methods : {

 } ,
 components : {
 Child
 }
 }
 </ script >

Then receive it through props in the child component, and then render it in a loop!

 < template >
 < div >
 < ul >
 < h2 > Quiet Night Thoughts </ h2 >
 < h4 > Li Bai </ h4 >
 < li v - for = "item in ancient" : key = "item" > { { item } } </ li >
 </ ul >
 </ div >
 </ template >
 < script >
 export default {
 props : {
 ancient :
 type : Array ,
 required : true
 }
 } ,
 data ( ) {
 return {
 demoList : [ 111 , 222 , 333 ]
 }
 }
 }
 </ script >

Browser effect:

From son to father

To pass parameters from a child component to a parent component, first we create a click event in the child component, and then we trigger the $emit event by clicking to send the value we want to pass.

 < template >
 < div >
 < input type = "text" v - model = "myText" >
 < button @click = "handleClick" > Submit </ button >
 </ div >
 </ template >
 < script >
 export default {
 data ( ) {
 return {
 myText : 'Please write down your plan'
 }
 } ,
 methods : {
 handleClick ( ) {
 console .log ( this .myText )
 this .$emit ( 'setMessage' , this .myText )
 this .myText = ''
 }
 }
 }
 </ script >

Then we listen to the events of the child component through on in the parent component and receive the passed value and then trigger the event here, so as to achieve the purpose of passing from child to parent.

 < template >
 < div id = "app" >
 < Child v - on : setMessage = "getMessage" />
 < ul >
 < li v - for = "item in demoList" : key = "item" > { { item } } </ li >
 </ ul >
 </ div >
 </ template >

 < script >
 import Child from './views/Child.vue'
 export default {
 data ( ) {
 return {
 demoList : [ 'Plan 1' , 'Plan 2' , 'Plan 3' ]
 }
 } ,
 methods : {
 getMessage ( text ) {
 this .demoList .push ( text )
 }
 } ,
 components : {
 Child
 }
 }
 </ script >

The browser displays the following:

Brother Communications

Bus communication is recommended for sibling communication because two components can communicate with each other directly, thus eliminating the two steps of passing information from child to parent and then to child.

First, declare a bus, that is, create an EvenBus.js in a suitable place, and then the internal structure is as follows:

 import Vue from 'vue'
 const eventBus = new Vue ( )

 export default eventBus

Then some people may wonder why the Vue instance is introduced in this way. Let's continue reading with this question.

Then I put two components inside the App component, BroderB.vue and BroderD.vue.

APP.vue

 < template >
 < div id = "app" >
 < BorderB />
 < BorderD />
 </ div >
 </ template >

 < script >
 import BorderB from './views/BroderB.vue'
 import BorderD from './views/BroderD.vue'
 export default {
 data ( ) {
 return {

 }
 } ,
 methods : {

 } ,
 components : {
 BorderB ,
 BorderD
 }
 }
 </ script >

Then let's look at BroderB.vue

 < template >
 < div >
 < input type = "text" v - model = "myText" >
 < button @click = "handleClick" > Submit </ button >
 </ div >
 </ template >
 < script >
 import evenBus from '../util/EvenBus'
 export default {
 data ( ) {
 return {
 myText : ''
 }
 } ,
 methods : {
 handleClick ( ) {
 evenBus .$emit ( 'setMessage' , this .myText )
 }
 }
 }
 </ script >

I introduced EvenBus here, and then triggered the event through the click event, and then responded here why we need an instance, because each instance has an emit method, and of course a listening $on method. Then pass this event and value out.

Then receive it in BroderD.vue

 < template >
 < div >
 < h1 v - for = "item in demoList" : key = "item" > { { item } } </ h1 >
 </ div >
 </ template >
 < script >
 import evenBus from '../util/EvenBus'
 export default {
 data ( ) {
 return {
 demoList : [ '111' , '222' , '333' ]
 }
 } ,
 methods : {
 handleGet ( msg ) {
 this .demoList .push ( msg )
 }
 } ,
 mounted ( ) {
 evenBus .$on ( 'setMessage' , this .handleGet )
 } ,
 beforeDestroy ( ) {
 evenBus .$off ( 'setMessage' , this .handleGet )
 }
 }
 </ script >

Listen to the $on event in the mounted hook function of this component and trigger the method here, so that the two components can communicate, and then the method here receives and uses the value

Then some people may ask why there is a beforeDestroy hook function behind it. It must be useful. When we end this component, it is best to unbind the evenBus, because if it is in the project, there may be some strange problems.

Then we look at the browser as follows