场景：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>
