Day 9 - 元件的资料传输(1)

在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>的数量就可以了，不必担心彼此的资料是否冲突。