vue中子組件調(diào)用兄弟組件方法

<template>
 <div>
 <!-- 子組件1 -->
 <son1 ref="borther" :dataFromFather="dataFromFather"></son1>
 <!-- 子組件2 -->
 <son2 @triggerBrotherMethods="triggerBrotherMethods" :dataFromFather="dataFromFather"></son2>
 </div>
</template>

<script>
// 引入子組件一
import son1 from './son1'
// 引入子組件二
import son2 from './son2'

export default {
 data() {
 return {
 dataFromFather: []
 }
 },
 // 注冊(cè)子組件
 components: {
 son1,
 son2
 },
 methods: {
 // 子組件2中click事件
 triggerBrotherMethods() {
 // 父組件通過(guò)$ref調(diào)用子組件1中的事件方法
 this.$refs.borther[0].bortherMethods()
 },
 }
}
</script>

<style lang="less" scoped>
/* .... */
</style>

<template>
 <!-- 子組件son2 -->
 <div @click="bortherMethods">
 <!-- 父組件傳值展示 -->
 {{dataFromFather}}
 </div>
</template>

<script>
export default {
 data() {
 return {
 }
 },
 props: ['dataFromFather'],
 methods: {
 // 兄弟組件中的按鈕事件
 bortherMethods() {
 // 子組件事件方法
 ...
 },
 }
}
</script>

<style lang="less" scoped>
/* .... */
</style>

<template>
 <!-- 子組件son2 -->
 <div @click="triggerBrotherMethods">
 <!-- 父組件傳值展示 -->
 {{dataFromFather}}
 </div>
</template>

<script>
export default {
 data() {
 return {
 }
 },
 props: ['dataFromFather'],
 methods: {
 // 觸發(fā)兄弟組件中的按鈕事件
 triggerBrotherMethods() {
 this.$emit('clickBrotherBtn', true)
 },
 }
}
</script>

<style lang="less" scoped>
/* .... */
</style>