Vue 父子組件傳值——props

`

<!--父組件-->
<template\> 
    <!--父組件中引入子組件-->
    <div\>  
    <!--定義一個名字：listen    傳入數據內容：sun   -->
      <Had v-bind:listen="sun"></Had>  
    </div>  
</template>
<script>  
//  引入組件
  import Had from './Had' 
  export default {  
      data(){  
         return {  
            message:'今天是',  
            sun:[  
               {name:'a',center:'left',show:'false'},  
               {name:'b',center:'right',show:'false'},  
               {name:'c',center:'left',show:'false'},  
               {name:'d',center:'right',show:'false'},  
               {name:'e',center:'left',show:'false'},  
               {name:'f',center:'right',show:'false'}  
            ]  
         }  
      },
</script>

<!--子組件-->
<template>  
    <div class="class">  
        <!-- 父組件向子組件傳值  -->
        <!-- 從共同定義的listen中取值-->
        <div v-for="item in listen">  
            <li>{{item.name}}</li>  
            <li v-show="item.show">{{item.center}}</li>  
        </div>  
    </div>  
</template>  
<script>  
    export default {  
        props:{         //props傳值
            listen:{        //listen名稱
                type:Array,     //定義傳值的類型 type  還有required       
                required:true  
            }  
        },
    }