Between the traditional values assembly vue brother

A. Child pass the Father, father to son.

two.

1, the data transfer between the brothers need the help of event vehicle, the transfer of data by way of the car event

2, create an instance of the Vue, let each brother share the same event mechanism.

3, transfer the data side, triggered by a bus event. $ Emit (the method name, transfer data).

4, the receiving side data, via Mounted () {} trigger bus. $ On (method name, function (parameter receiving data) {component of the received data transmitted over the data}), when this has occurred in the function the change, you can use the arrow functions.

Examples are as follows:

We can create a separate js file eventVue.js, reads as follows

Import View from 'for' 

export new default view

If the parent component as follows:

<template>
     <components-a></components-a>
     <components-b></components-b>
</template>

A sub-assembly as follows:

<Template> 
      <div class = "Components-A"> 
           <Button @ = the Click "abtn"> A button </ Button> 
      </ div> 
</ Template> 
<Script> 
Import from eventVue '../../js /event.js' 
Export default { 
      name: 'App', 
      Data () { 
        return { 
                'MSG': "I component A" 
        } 
      }, 
      Methods: { 
           abtn: function () { 
                   . eventVue $ EMIT ( "myfun" , this.msg) // $ emit this method will trigger an event 
           } 
      } 
} 
</ Script>

B subassembly as follows:

<Template> 
     <div class = "Components-A"> 
         <div> btext {{}} </ div> 
     </ div> 
</ Template> 
<Script> 
Import from eventVue '../../js/event. JS ' 
Export default { 
   name:' App ', 
   Data () { 
        return { 
           ' btext ': "I am a B component content" 
        } 
   }, 
   Created: function () { 
       this.bbtn (); 
   }, 
   Methods: { 
       bbtn: function () { 
            eventVue. $ ON ( "myfun", (Message) => {// herein preferably function by an arrow, or this refers to a problem with 
                 this.      btext = message      
            })
       }
    }
}
</script>

Such a subassembly inside click function can change the value of the component b brother inside.