父子元件之間通訊

父元件可以呼叫子元件的方法，子元件不能呼叫父元件的方法，所以可以在子元件定義一個方法，然後在父元件中通過ref來呼叫。

子元件中私有的方法命名規範是寫一個下劃線加方法名，能被父元件呼叫的方法，直接寫方法名

father.vue

<template lang="html">
  <div class="father">
    <button type="button" name="button" @click="toggle">button</button>
    <son ref="mySon"></son>
  </div>
</template>

<script>
import son from 'components/son'
export default {
  components: {
    son
  },
  methods: {
    toggle() {
      this.$refs.mySon.show()
    }
  }
}
</script>

<template lang="html">
  <div class="father" v-show="showFlag">
    son
  </div>
</template>

<script>
export default {
  data() {
    return {
      showFlag: false
    }
  },
  methods: {
    show() {
      this.showFlag = !this.showFlag
    }
  }
}
</script>

father.vue

<template lang="html">
  <div class="">
    <son @increase="add"></son>
    <son @increase="add"></son>
    {{total}}
  </div>
</template>

<script>
import son from 'components/son'
export default {
  components: {
    son
  },
  methods: {
    add() {
      this.total += 10
    }
  },
  data() {
    return {
      total: 0
    }
  }
}
</script>

<template lang="html">
  <div class="">
    <button type="button" name="button" @click="increase">{{counter}}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    increase() {
      this.counter++
        this.$emit('increase')
    }
  }
}
</script>

用我聽的懂的話來解釋一下：父元件使用$on監聽子元件的動作，但是需要使用v-on或者是@，後面跟子元件暴露的事件的名稱，然後如果子元件有動作了，就會別監聽到，父元件再執行一個自己的動作，子元件的動作單獨完成，父元件的動作單獨完成。完全是按照watch來理解的$on與$emit，子元件通過$emit觸發事件。
完美