[JS Master's Road] Vue2.0 vue-cli+webpack Parent-child Component Communication tutorial

Under the git command line, execute the following command to complete the setup of the environment:

1,NPM Install--global vue-cli Installing the Vue command-line tool

2,vue init webpack Vue-demo generates a Webpack project with the Vue command, the project name is Vue-demo

3,CD Vue-demo cut-in project

4,NPM install installs all dependent packages in the Package.json

5,NPM Run Dev Running project

The parent component passes data to the child component

Then delete the default Hello.vue component and organize the App.vue to look like this:

1 <template> 2   <div id= "App" > 3   This is an empty app  4   </div> 5 </template> 6  7 <script> 8   Default  {  9     name: ' app '  </script>   <style> </style>

Modify the router below Index.js file as follows:

  1  import Vue from ' vue '  2  import Router From ' Vue-router '  3   4  vue.use (Router)   5   6  Export default  new    Router ({  7   Routes: [  8   {  9  path: '/'  10    11  ]  12 }) 

1. Create a subcomponent in the components directory Child.vue

The code is as follows:

1 <template> 2     <div> 3          4         <p>{{content}}</p> 5     </div> 6 </template> 7 <script > 8default  {  9     props: [' content ']  } </script>

2. Modify the App.vue code as follows:

1<template>2<div id= "App" >3<child:content= "MSG" ></child>4</div>5</template>6 7<script>8Import child from './components/child.vue ';9Exportdefault {TenName: ' App ', One data () { A       return { -' msg ': ' This is the greeting from the parent component ' -       } the     }, - Components : { -  Child -     } +   } -</script>

This completes the parent component passing data to the subassembly through the props property

You can also bind properties with V-bind

<template>  <div id= "app" >    <child:content= "msg" ></child>    <child v-bind: Content= "MSG" ></child>  </div></template>

Summary:

• Subcomponents Create a property in props that receives the value passed by the parent component.
• Calling subcomponents in parent component
• Binding the properties created in subcomponents props in the Subcomponents tab
• Assign the value that you want to the child component to this property, such as the MSG of the parent component

Second, subassembly passes data to parent component

1, modify the Child.vue as follows:

1<template>2<div>34<p>{{content}}</p>5<p>6<input type= "button" value= "Tell the Father a message" v-on:click= "Send" >7</p>8</div>9</template>Ten<script> OneExportdefault { AProps: [' content '], - methods: { - Send () { the              This. $emit (' Parentrecev ', "Father, Babe is learning vue2.0 with GHOSTWU" ) -         } -     } - } +</script>

The subcomponent sends a custom event Parentrecev via $emit, and the following parameter is the content

2,app.vue modified as follows

1<template>2<div id= "App" >3<child:content= "MSG" ></child>4<child v-bind:content= "msg" v-on:parentrecev= "ShowMsg" ></child>5<p>{{data}}</p>6</div>7</template>8 9<script>TenImport child from './components/child.vue '; OneExportdefault { AName: ' App ', - data () { -       return { the' msg ': ' This is the greeting from the parent component ', -Data: ' -       } -     }, + methods: { - showmsg (msg) { +          This. data =msg; A       } at     }, - Components : { -  Child -     } -   } -</script>

In the second sub-component listener event Parentrecev, when the sub-component taps the button will trigger this custom event, and then trigger the SHOWMSG function, you can receive the data passed by the subassembly, no custom event is bound to receive information sent by the child component.

Summary:

• A custom event is triggered by $emit in a sub-component
• The value to be passed as the second argument of $emit, which is received by the method of the parent component
• Calling a subassembly in the parent component and binding a custom event sent on the child component label

What they have in common is a bridge, the bridge to the father is a custom event $emit, and the parent-child bridge is the attribute in the props. That's the key to transferring data between them.

[JS Master's Road] Vue2.0 vue-cli+webpack Parent-child Component Communication tutorial