Vue教程18：組件間通訊之二：經過事件通訊

閱讀更多系列文章請訪問個人GitHub博客，示例代碼請訪問這裏。

該節教程代碼可經過npm start運行devServer，在http://localhost:8080/查看效果

經過$emit觸發事件，經過$on接收事件，實現通訊

代碼示例：/lesson17/src/components/parent.js，/lesson17/src/components/child.js

經過調用組件實例的$emit(事件名, 參數)，向組件發送一個事件。 在組件的生命週期created中，使用\this.$on(事件名, 回調函數)，在回調函數中能夠接收到參數，以此實現組件間通訊。

父組件代碼：

export default Vue.component('parent', {
  data() {
    return {
      num: 0,
    };
  },
  components: {
    Child
  },
  created() {
    this.$on('add', function (n) {
      this.num = this.num + n
    })
  },
  methods: {
    addChild() {
      this.$refs.child.$emit('add', 5)
    },
  },
  template: `
    <div>
      <div>父級
      num：{{num}}
      <br/><input type="button" value="子級num1 + 5" @click="addChild" />
      <child ref="child" :parent="this"></child>
    </div>
  `
});
複製代碼

子組件代碼：

export default Vue.component('parent', {
  props: ['parent'],
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    addParent() {
      this.parent.$emit('add', 5)
    },
  },
  created() {
    this.$on('add', function (n) {
      this.num = this.num + n
    })
  },
  template: `
    <div>
      子級
      num：{{num}}
      <br/><input type="button" value="父級num1 + 5" @click="addParent" />
    </div>
  `
});
複製代碼