還記得一開始提過的component觀念嗎？我們把會重復使用的網頁結構寫成一個元件，需要時就引用它，這麼做不但能減少不必要的重工，還能讓維護更加方便有效率！現在就來說明一下該怎麼寫吧！

Component範例實做

在資料夾src底下，其實vue已經幫我們建好一個components資料夾了，裡面放了一個HelloWorld.vue的範例檔，我們另外在旁邊新增一個吧，我就做一張card來示範好了！
對著components頁籤按下右鍵新增一個vue檔，取名Card.vue，或是偷懶一點直接復製「HelloWorld.vue範例檔」，再刪掉內容，留下基本的標籤如下：

<template>
  <div class="card">
    
  </div>
</template>

<script>
    export default {

    }
</script>

<style scoped></style>

• <template>是寫html的地方，記得內容必需用一個標籤包住所有內容，我是用<div class="card">包起。
• <script>是寫vue程式的地方。
• <style scoped>是寫css的地方，scoped指的是這個<style>裡的內容，只限這個card component用，它不會變成全域而發生css衝突。

接下來我寫一個陽春的內容樣式當範例就好！

<template>
  <div class="card">
    <div class="card_title">
        卡片標題
    </div>
    <div class="card_body">
        卡片內容
    </div>
  </div>
</template>

<script>
export default {
  
}
</script>

<style scoped>
    .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;
    }
</style>

引用Component實做

目前都使用基本的css而已，相信對一般網頁設計師而言非常容易的，那我就不對css多做說明了！
現在做好component，我們就要來引用它了！接著換到首頁App.vue寫入以下內容(為了避免影響閱讀，我先移掉了前幾天的範例內容)：

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

<script>
  import Card from './components/Card'
  
  export default {
    components: {
      Card
    }
  }
</script>

引用Component範例解說

1. 將<Card />標籤放在<template>裡你需要用的地方。
2. 到<script>寫入import Card from './components/Card'跟它說我要引用哪個component，位置在哪。
3. 在export default底下加入：

components: {
  Card
}

代表我要使用它。

完成以上簡單三步驟你就能輕鬆使用component了！
聰明的你一定會想到內容如果都不同呢？不可能寫死在component裡吧？這樣怎麼共用它？剛剛只是示範用而已，所以我放了假字進去，要讓component能共用，內容就要用資料綁進去才行，要多張卡片只需要用v-for寫就行了！

那該怎麼綁？它一定不是寫在component的data裡，每頁需要的內容可能不同！因此component在邏輯上是屬於接收資料的那一方，而不是存放資料，我們可將資料寫在頁面的data，依照頁面需要的內容傳資料給component，那該怎麼傳進去？component又該怎麼接收它？這就要講到重要的props啦！明天我們就專門來看資料的傳遞！