Vue组件之间传值（父子）

           

父组件代码如下：

 1 <template>
 2     <div>
 3         <div>父组件</div>
 4         <child :message="parentMsg"></child>  
 5     </div>
 6 </template>
 7  
 8 <script>
 9  
10 import child from './child'  //引入child组件
11 export default {
12     data() {
13             return {
14                 parentMsg: 'a message from parent'  //在data中定义需要传入的值
15             }
16         },
17         components: {
18             child
19         }
20 }
21 </script>
22 <style>
23 </style>

子组件传值代码如下：

 1 <template>
 2     <div>
 3         <div>{{message}}(子组件)</div>
 4     </div>
 5 </template>
 6 <script>
 7 export default {
 8     props: {
 9         message: String  //定义传值的类型<br>    }
10 }
11 </script>
12 <style>
13 </style>