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)

Source: Internet
Author: User
Tags emit eventbus

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.