iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
0

昨天我們寫完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,裡面的內容分別為:

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的介紹!


上一篇
Vue[08]-Components
下一篇
Vue[19]-生命週期
系列文
網頁設計靠 Vue.js 轉前端30

尚未有邦友留言

立即登入留言