tags: Vue.js ItIron2020

前言

昨天我們介紹了Vue生命週期的概念，那是個有些抽象難懂的概念，坦白說我那篇文章下方的參考文章都寫得比我清楚得多:D 我只是根據我個人的理解做了最基本的整理，希望多少能對你們有些幫助! 而今天我們要介紹的是另一個重要的概念，
Vue Components，組件化是Vue & React的特色之一，藉由組件化可以讓程式碼管理更加容易，不過其中自然也有一些眉角是你要注意的! 我們馬上就開始今天的進度吧!

什麼是Vue component?

Vue提供了組件化的概念讓你的網站有著更好的結構方便管理，每一個Vue組件其實就是一個Vue實體，其中自然包含著

• markup template(HTML)
• logic (JS)
• style (CSS)

同時你之前學到的所有屬性也可以在組件中使用

• data
• methods
• computed
• watch
• ...etc

vue組件的用意都在於藉由組件內的自我管理，讓後續的管理更加輕鬆(你只要處理對應組件中的程式碼)，如果你覺得這樣很複雜，那就先這樣記著

Vue組件就是有名字的Vue實體

好喔 然後呢?

我總是認為有例子會更好了解，我們看一下今天的範例，是一個簡單的todo list，首先請打開這個demo

<template>
  <div id="app">
    <h1>My Todo List</h1>
    <div :class="[todos[0].isComplete ? 'success' : 'error', 'todo-wrapper']">
      <div class="todo-title">
        {{ todos[0].title }}
      </div>
      <div class="todo-icons">
        <i class="fa fa-check" aria-hidden="true"></i>
        <i class="fa fa-trash-alt" aria-hidden="true"></i>
      </div>
    </div>
  </div>
</template>

<script>
const todos = [
  {
    title: "Get dressed",
    isComplete: false
  },
  {
    title: "Buy food",
    isComplete: false
  },
  {
    title: "Eat lunch",
    isComplete: true
  },
  {
    title: "Write Article",
    isComplete: true
  }
];

export default {
  data() {
    return {
      message: "Welcome to Vue!",
      todos: todos
    };
  },
  methods: {}
};
</script>

目前我們是寫的死死的，聰明的你一定想到我們可以用v-for來列出所有的todo，請將上方的程式碼做一個簡單的修改

<div :class="[todo.isComplete ? 'success' : 'error', 'todo-wrapper']" v-for="todo in todos" :key="todo.id">
      <div class="todo-title">
        {{ todo.title }}
      </div>
      <div class="todo-icons">
        <i class="fa fa-check" aria-hidden="true"></i>
        <i class="fa fa-trash-alt" aria-hidden="true"></i>
      </div>
</div>

你應該會看到這樣的畫面

效果上沒什麼問題，但如果今天你這樣的todos要在很多地方使用呢?
你當然可以在每一個頁面都寫一次一模一樣的東西，但人生很美好，這種無趣的重複動作我們還是能省則省吧!

註冊global vue component

我們現在要做的是，建立一個全新的vue組件，讓我們可以在任何地方使用，這樣的話上方的例子最終就可以改寫為類似以下的東西

<template>
  <div id="app">
    <h1>My Todo List</h1>
    <todo-list v-for="todo in todos" :key="todo.id"></todo-list>
  </div>
</template>

如何，是不是相當精簡呢? 藉由這樣的組件化管理，你在每一隻vue檔案裡面要關心的事情就會變少，維護起來自然也比較容易! 我們需要利用以下的語法註冊vue組件

Vue.component('組件名稱', {
  傳入的選項
}); 

現在我們要建立的是一個名為todo-list的組件，所以請你在程式碼中新增以下的部分，你也許注意到裡面的內容有些不一樣，這個我之後會說明。

Vue.component('todo-list', {
  template: `
    <div class="todo-wrapper">
      <div class="todo-title">
        Write Article
      </div>
      <div class="todo-icons">
        <i class="fa fa-check" aria-hidden="true"></i>
        <i class="fa fa-trash-alt" aria-hidden="true"></i>
      </div>
    </div>
  `
}); 

接著馬上在我們的template中使用我們剛註冊的vue組件吧!
請將原本的程式碼改為

<template>
  <div id="app">
    <h1>My Todo List</h1>
    <todo-list v-for="todo in todos" :key="todo.id"></todo-list>
  </div>
</template>

你應該會看到以下的畫面，那就表示你成功囉!

結語

今天我們介紹了組件化的概念，雖然我們成功的改寫了原先的頁面(今天完整版的demo在這)，讓它看起來相當乾淨整潔，不過你馬上就會注意到幾個問題

1. 本來左邊用來判斷完成狀態的紅綠條消失了
2. todo title全都一樣

這兩者的原因是相同的，在原先我們的寫法中，我們是利用傳入的todos去渲染每一個todo的標題，並根據其中的isComplete變數去決定左側的狀態顯示，但我們現在並沒有把這些資訊傳進我們新建立的組件，組件內的template是完全寫死的! 也因此會造成這樣的結果! 那..該怎麼解決呢? 這個就留在明天說吧:D 大家加油!

此文章同步發布於個人部落格，有興趣的大大也可以來參觀一下:D