Vue's most used components communicate in three ways: parent-to-child component communication, child-to-parent component communication, sibling component communication. (template syntax for templates with pug)

Vue's most used components communicate in three ways: parent-to-child component communication, child-to-parent component communication, sibling component communication. (template syntax for templates with pug)

1. Parent-to-child component communication

Parent-to-child component communication is through props data transfer, and has these characteristics, one-way delivery, the child component receives the data can not be changed, if the change, will issue a warning, every time the parent component updates, all prop of the subcomponent will be updated to the newest value.

1 Parent component 2 <template lang= "Pug" > 3    . Father 4      Children (: Name= ' msg ') 5 </template> 6 <script> 7  8 Import children from './children ' 9 export default {Ten  name: ' father ',    one data () {      return {        msg: ' I am Father's data '      }15    }16  }17 </script>

1 subcomponents 2  <template lang= "Pug" >3   . Children4     . Box {name}}5 </template>6 7 <script>8 Export Default {9   name: ' father ', +   //props: [' name '],  1.props of the first notation   //props: {2.props The second way of writing a   //
   NAME:ARRAY13   //},14   props: {3.props in the third notation (recommended)     name: {       type:string17     }18   },1 9 Data   () {     return {       msg: ' I am children '     }23   }24}25 </script>

1 2. Child-to-parent component Communication 2   3  Generic child-to-parent component communication is a worthwhile pass through events event 4   5  Parent Component 6   <template lang= "Pug" > 7    . Father 8      Children (@hand = ' hand ')//Custom Events 1 </template> 9  <script>11 import children from '. Children ' export Default {+   : ' father ', + data () {* * * * *       msg: ' I am Father     '   },19 Components   : {      Children21    },22   methods: {     Hand (msg) {+       alert (msg)/ /Get the value passed by subassembly     }26   }27}28 </script>

1 Sub-Components 2 <template lang= "Pug" > 3   . Children 4     input (type= ' button ' value= ' clickme ' @click = ' handle ') 5 </ Template> 6  7 <script> 8 export Default {9   name: ' Children ',   data () {One     return {       Msg: ' I am children's data '     }14   },15   methods: {     handle () {       $emit (' hand ', this.msg)  //Send event name + passed value     }20 </script>

3. Brother Component Communication

From the above, the parent-child component communication will have a medium, equivalent to a transmission of information media, can make the data passed through. Brother components The communications industry requires a medium that we often call the event line ~

1. Create a component name: Eventbus (random) I put it under the Src/asstest/eventbus/index.js folder.

1 Import vue from ' Vue ' 2 export default new Vue ()

2. Create the first sibling component, name: Emit

1 <template lang= "Pug" > 2   . Emit 3     . Box Emit component A 4     button (@click = ' show ') pass value to on component 5 </template> 6< C5/>7 <script> 8 Import bus from '. /assets/eventbus ' 9 export default {   methods: {One-     show () {       bus. $emit (' user ', ' haha ')     }14< C11/>}15}16 </script>

3. Create a second sibling component, name: On

1 <template lang= "Pug" > 2   . On 3     . cont accept data for emit components: {{msg}} 4 </template> 5  6 <script> 7 Impo RT bus from '. /assets/eventbus ' 8 export default {9   data () {Ten     return}       msg: ' On '     }13   },14   mounted () {15 Let self     = this16     bus. $on (' User ', (msg) = {       self.msg = msg18     })   }20}21 </script>

The usual way of passing values in Vue is these three kinds, but the square is not limited to these three kinds.

Vue's most used components communicate in three ways: parent-to-child component communication, child-to-parent component communication, sibling component communication. (template syntax for templates with pug)