昨天我們寫完component，今天要來把資料傳進去了！
props就是今天的主角，放心它一樣是平易近人的，現在我們打開昨天的檔案當實例完成它。

Props實做

今天我打算寫5個人的資料卡，裡面包含了姓名、生日、e-mail，這時該怎麼寫？
還記得之前教的綁資料跟v-for嗎( https://ithelp.ithome.com.tw/articles/10202408 )？你可以先回想一下！

我們到頁面vue.app，接著在export default下寫入這次要放入的陣列資料，猜猜這次資料該綁在哪？component的標籤上對吧？很容易吧！看看下面的vue.app範例是不是跟你想的一樣：

<template>
  <div id="app">
    <Card :cardData="cardData" />
  </div>
</template>

<script>
  import Card from './components/Card'
  export default {
    name: 'app',
    components: {
      Card
    },
    data() {
      return {
        cardData:[
          {
            name:'Adam',
            birthday:'1985.08.12',
            mail:'adam@xxx.com'
          },
          {
            name:'Jack',
            birthday:'1980.02.23',
            mail:'jack@xxx.com'
          },
          {
            name:'Candy',
            birthday:'1982.05.06',
            mail:'candy@xxx.com'
          },
          {
            name:'Louis',
            birthday:'1984.11.21',
            mail:'loui@xxx.com'
          },
          {
            name:'Lurry',
            birthday:'1982.01.17',
            mail:'lurry@xxx.com'
          }
        ]
      }
    } 
  }
</script>

<style></style>

實做解說

• 我在component標籤上綁入:cardData="cardData"，還記得之前說的v-bind簡寫嗎？它完整的寫法是v-bind:cardData="cardData"，也就是「屬性cardData要帶入資料cardData」，那屬性一定也要叫cardData嗎？其實也不用，但取一樣名字比較方便好記！
  那上次v-for加入的:key能不能改名字？不行喔！那是vue的保留字(特殊特性)，不是我取的！還有哪些特殊特性？你可以參考以下連結( https://vuejs.org/v2/api/index.html#Special-Attributes )。

今天的重點來了！只有綁在compontent標籤上是不夠的，你需要換到compontent裡寫入props(接收資料)才行！
我開起compontents資料夾裡的Card.vue寫下：

<template>
    <div class="card_wall">
        <div class="card" v-for="item in cardData" :key="item.name">
            <div class="card_title">{{ item.name }}</div>
            <div class="card_body">
                <p>生日：{{ item.birthday }}</p>
                <p>e-mail：{{ item.mail }}</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        cardData: {
            type: Array,
            required: true
        }
    }
}
</script>

<style scoped>
    .card_wall {
        display: inline-flex;
        flex-wrap: wrap;
    }
    .card {
        width: 300px;
        margin: 10px;
        background: white;
        border: 1px solid #cccccc;
        border-radius: 6px;
        box-shadow: 0 0 4px 0 rgba(0,0,0,0.2);
    }
    .card_title {
        padding: 16px;
        border-bottom: 1px solid #cccccc;
        color: black;
        font-size: 20px;
        line-height: 26px;
        font-weight: bold;
    }
    .card_body {
        padding: 16px;
        color: #555555;
        font-size: 16px;
        line-height: 22px;
    }
    p {
        margin: 0 0 10px 0;
    }
</style>

範例解說

從上面你會看到<div class="card">加入了v-for，並分別把資料內容放到需要呈現的地方。
接著我在export default下加入了props，裡面的內容分別為：

• cardData:我要傳入的資料名稱。
• type:這個資料的屬性是什麼？我傳入的是Array陣列(其它可選擇屬性： https://vuejs.org/v2/guide/components-props.html )。
• required:是不是一定要收到？true是的！

css的部份一樣就不特別說明了，ok就這樣嗎？

嘿！等等！ 你有沒有發現我在<template>內的結構多加了<div class="card_wall">包起<div class="card">！為什麼我要這麼做？不是如之前所說的<template>下只要有一層父層結構包住所有內容就行啦！為何多這層？

因為當我們把v-for綁到<div class="card">上發生了一件重要的事！它隨著我們的資料長成了 5張卡喔！！ 所以<template>下變成5個<div class="card">！這是新手容易不小心就忽略的地方~。
不過這層<div class="card_wall">在切版上也不會是多餘結構，對切版熟的網頁設計師一定會想到，我們還是需要增加一層結構去包起所有的卡片！東西還是要裝箱好整理嘛，總不能散在外，會出問題的~~~！

以上就是今天Props的介紹！