如果疫情結束了，最會被報復性的行為會是什麼？

有人說元件(組件)應用在網頁上，最早出現是在 Google 的手機開發介面的討論，當時(時間不可考？) Google 希望能夠把每一個功能都拆分成一個個的元件，然後可以讓這些元件重複使用在不同的頁面或手機的系統上，也就是說不是以「頁面」為單位，而是以一個頁面的部分「區域」為單位，組合成頁面，讓這些區域可以重複被使用。

在 Vue 裡，元件是可以重複使用的 Vue 實例，且會有各自的名稱，因為是可重複使用的 Vue 實例，所以元件與 new Vue 有相同的屬性，例如 data、computed、watch、methods 以及生命週期鉤子等。唯一的例外是像 el 這樣根目錄實例特有的選項。
我們先來看這張圖：

可以想像一下一般我們看到的網頁，大部分會有所謂的頁頭, 頁尾, 內容區塊或側邊欄，再細分一點，在頁頭裡可能登入區域, menu 或 logo 區塊，這些都可以再被拆分更小的區塊，而這些區塊都可以是原件。

每一個元件和它周圍的元件都有一定的層級關係例如父子層級關係（上 <-> 下）或兄弟關係(左 <-> 右)，在這些不同的層級關係裡，也會使用不同的方式溝通。
在使用元件之前，需要先瞭解元件化需要有同樣的規範，才能順暢的溝通，以往有種元件規範為 Web Component，但因為存在許多不同瀏覽器相容的問題，所以現在幾乎摒棄不用，取而代之的是 Vue.component，原因是 Vue.component 已經繼承了部分 Web Component 的優點與規範，

定義 Vue 的全域元件

我們需要先定義元件才能開始使用元件，全域元件定義的語法為：

Vue.component(元件名稱, {
  data: '元件資料',
  template: '元件模版內容',
});

定義元件的範例(按鈕)，按了幾次按鈕，就會顯示按幾次：

// 定義一個名為 button-counter 的新元件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0,
    };
  },
  template: '<button v-on:click="count++">Click on {{ count }}times</button>',
});
// 也別忘了要創建 Vue 的實例
const vm = new Vue({
  el: '#app',
  data: {},
});

全域元件的使用

要使用元件，只要在頁面裡以元件名稱為標籤，寫成 HTML 形式的標籤就可以了，但記得要用實例的 el 元素包覆。

<div id="app">
  <button-counter></button-counter>
</div>

其實掛載在#app上面的 Vue 實例也是元件，也稱為「父元件」，而剛剛我們定義的元件則稱為「子元件」。

我們今天先介紹到這裡，明天繼續元件更多的介紹。

每日一句法文有益身心：C'est magnifique ! --> say.蠻.泥.費克！ --> 好完美，太棒了！