場景：index.vue 種有2個(gè)子組件亮钦，pagea.vue赫蛇、pageb.vue酷麦；pagea.vue需要調(diào)用pageb.vue中的事件甚负。
兄弟組件通信實(shí)現(xiàn)思路：pagea.vue 通過this.$emit() 拋出事件，index.vue監(jiān)聽窝剖。然后通過this.$refs操作pageb.vue麻掸。
思路：子(pagea.vue)->父，父->子(pageb.vue)
案例：
index.vue
<template>
<div>
<pagea @pageaclick="paclick"></pagea>
<pageb ref="pagebref"></pageb>
</div>
</template>
<script>
// 導(dǎo)入子組件
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">點(diǎn)擊</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方法被調(diào)用');
}
}
}
</script>
