28.Vue兄弟组件通信

场景：index.vue 种有2个子组件，pagea.vue、pageb.vue；pagea.vue需要调用pageb.vue中的事件。

兄弟组件通信实现思路：pagea.vue 通过this.$emit() 抛出事件，index.vue监听。然后通过this.$refs操作pageb.vue。
思路：子(pagea.vue)->父，父->子(pageb.vue)

案例：

index.vue

<template>
  <div>
      <pagea @pageaclick="paclick"></pagea>
      <pageb ref="pagebref"></pageb>
  </div>
</template>
<script>
  // 导入子组件
  import pagea from './pagea'
  import pageb from './pageb'
  export default {
    components: {
      pagea,
      pageb
    },
    methods: {
      paclick(){
        this.$refs.pagebref.funb();
      }
    }
  }
</script>

pagea.vue

<template>
  <div>
      <button @click="funa">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      funa(){
        //
        this.$emit('pageaclick')
      }
    }
  }
</script>

pageb.vue

<template>
  <div> </div>
</template>
<script>
  export default {
    methods: {
      funb(){
        alert('pageb方法被调用');
      }
    }
  }
</script>