在Vue中，元件間資料溝通傳遞的方式，一直都是個不容忽視的問題，妥善處理資料流，也是身為工程師的必學課題。

如果沒用元件，當我們今天想要分離多個資料流的問題的時候，可能就會面臨以下的情況。

<template>
  <div id="app">
  <button @click="count++">You clicked me {{ count }} times.</button>
  <button @click="count++">You clicked me {{ count }} times.</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      count:0
    };
  },
};
</script>

上面是一個點擊計數器的範例，當我們點擊畫面按鈕的時候，按鈕裡面的數字也會隨著增加。

當我按下其中一個按鈕的時候，兩個按鈕內的 count 都增加了！ 這是因為這兩個按鈕共用同一份 count 的資料流。

我們雖然可以新增新的物件去儲存別的資料，可以用 count1 、 count2 ，這樣新增下去。

我們雖然透過這樣來避開錯誤，讓每一個按鈕擁有各自的物件來儲存資料流，但這樣我們的程式也失去了彈性，有幾個按鈕就必須事先新增幾個 count 的屬性，這樣將難以reuse與maintain。

如果將其元件化，並把資料流抽離出來，可以寫成以下的程式碼:

<template>
  <div id="app">
    <!--<button @click="count++">You clicked me {{ count }} times.</button>
    <button @click="count++">You clicked me {{ count }} times.</button>-->
    <buttonCount></buttonCount>
    <buttonCount></buttonCount>
  </div>
</template>

<script>
const local_component = {
  // options
  data() {
    return {
      count: 0,
    };
  },
  template: `<button @click="count++">You clicked me {{ count }} times.</button>`,
};
export default {
  name: "App",
  components: {
    buttonCount: local_component,
  },
};
</script>

像這樣，我們將計數器包裝成獨立的元件 <buttonCount>，雖然同樣是計數器元件，但各自的 count 資料屬性都是獨立的，並不會因為按了 A 按鈕，B 按鈕就跟著加一。

如果要新增多組計數器，我們也只需要在 View 中繼續增加 <buttonCount>的數量就可以了，不必擔心彼此的資料是否衝突。

Hi, I am Grant.

個人部落格 - https://grantliblog.wordpress.com/
個人網站 - https://grantli-website.netlify.app/#/mainpage
我的寫作專題 - https://vocus.cc/user/5af2e9b5fd89780001822db4#