Vue Components 子元件之间的资料传递

沟通不良的代价就是彼此越来越疏远，然後行同陌路如陌生人。

子元件之间就像兄弟一样的关系，所以这篇要来讲兄弟间的沟通之道---兄弟关系的元件如何互相传值。

前几篇有介绍了父传子、子传父，这样还不够，且如果将资料从子元件传给父元件，再透过父元件传给另一个子元件，实在不是一件简单的事，於是有了针对兄弟之间沟通的方式，我们暂且称为事件中心，只要透过这个兄弟专属的事件中心来交换资料，就会变的很容易了。

他们的关系就像这张图，事件中心负责监听子元件，有触发就会再传至事件中心做处理。

兄弟元件传输主要分三个步骤

1. 单独的事件中心管理元件之间的通信。 const eventHub = new Vue()
2. 监听事件与销毁事件eventHub/$on('自定义事件名称',事件函式)与销毁事件eventHub/$on('自定义事件名称')
3. 触发事件eventHub/$emit('自定义事件名称',参数 ex.ID)

来实作试试吧！我们希望有两个子元件，各自有各自的按钮，当我们按下 A 的按钮，在 B 的区域会显示 A 计算结果，相反的当我们按下 B 的按钮，在 A 的区域会显示 B 计算结果。

** 父元件的 HTML 部分**
当我们把两个子元件(component)各自定义好後，以元件名称为标签。

<div id="app">
  <div>{{ msg }}</div>
  <text-tracy></text-tracy>
  <hr />
  <text-ayda></text-ayda>
</div>

我们需要：

• 一个 Vue 的实例来当作事件中心
• 一个 Vue 的实例为父元件
• 两个 Vue 的自定义元件为子元件
  两个元件都有各自的资料和模版(template)，以及各自的资料和方法与绑定在生命周期 mounted的方法。
  利用事件中心的hub在每次触发事件时，使用监听事件触发传回来的值，进行计算，并将计算累计结果传回原本的子元件显示。

// 事件中心
let hub = new Vue();
// 兄弟元件间的资料传递
// 子元件 Tracy
Vue.component('text-tracy', {
  data: function () {
    return {
      count: 0,
    };
  },
  template: `
    <div>
      <div>Tracy: {{count}}</div>
      <button @click="handle">Tracy click</button>
    </div>
    `,
  methods: {
    handle: function () {
      // 触发兄弟元件的事件
      hub.$emit('ayda-event', 5);
    },
  },
  // 生命周期绑定
  mounted: function () {
    // 监听事件
    hub.$on('tracy-event', (value) => {
      this.count += value;
    });
  },
});
// 子元件 Ayda
Vue.component('text-ayda', {
  data: function () {
    return {
      count: 0,
    };
  },
  template: `
    <div>
      <div>Ayda: {{count}}</div>
      <button @click="handle">Ayda click</button>
    </div>
    `,
  methods: {
    handle: function () {
      // 触发兄弟元件的事件
      hub.$emit('tracy-event', 1);
    },
  },
  // 生命周期绑定
  mounted: function () {
    // 监听事件
    hub.$on('ayda-event', (value) => {
      this.count += value;
    });
  },
});

const vm = new Vue({
  el: '#app',
  data: {
    msg: '父组件中的资料内容',
  },
});

元件(component)的各项操作终於介绍完毕了，这一部分刚开始了解时很容易让人头晕，但实际实作一遍，就会清楚需多。
这些元件的操作，在什麽时候会用的到？其实只要希望在页面上把一些元素细拆分成更多可复用的区域，就需要用到这些操作喔。

每日一句法文有益身心：Ça y est ! --> 撒.野！ --> 好了！