vue中子组件调用兄弟组件方法

 开发中遇到子组件需要调用兄弟组件中的方法，如下写个小demo记录下心得，如果你有好的方法，请到评论区域指教

父组件示例代码：

组件功能解析： 

通过$emit获取子组件事件，通过$ref调用子组件中事件，实现子组件二的click事件

调用兄弟组件一中的事件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

<template>   <div>    <!-- 子组件1 -->    <son1 ref= "borther" :dataFromFather= "dataFromFather" ></son1>    <!-- 子组件2 -->    <son2 @clickBrotherBtn= "triggerBrotherMethods" :dataFromFather= "dataFromFather" ></son2>   </div> </template>   <script> // 引入子组件一 import son1 from './son1' // 引入子组件二 import son2 from './son2'   export default {   data() {    return {     dataFromFather: []    }   },   // 注册子组件   components: {    son1,    son2   },   methods: {    // 子组件2中click事件    triggerBrotherMethods() {     // 父组件通过$ref调用子组件1中的事件方法     this .$refs.borther.bortherMethods()    },   } } </script>   <style lang= "less" scoped> /* .... */ </style>

子组件一

组件功能解析： 

加载父组件数据，进行业务操作

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<template>   <!-- 子组件son2 -->   <div @click= "bortherMethods" >    <!-- 父组件传值展示 -->    {{dataFromFather}}   </div> </template>   <script> export default {   data() {    return {    }   },   props: [ 'dataFromFather' ],   methods: {    // 兄弟组件中的按钮事件    bortherMethods() {     // 子组件事件方法     ...    },   } } </script>   <style lang= "less" scoped> /* .... */ </style>

子组件二：

组件功能解析： 

加载父组件数据，通过click事件emit传给父组件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<template>   <!-- 子组件son2 -->   <div @click= "triggerBrotherMethods" >    <!-- 父组件传值展示 -->    {{dataFromFather}}   </div> </template>   <script> export default {   data() {    return {    }   },   props: [ 'dataFromFather' ],   methods: {    // 触发兄弟组件中的按钮事件    triggerBrotherMethods() {     this .$emit( 'clickBrotherBtn' , true )    },   } } </script>   <style lang= "less" scoped> /* .... */ </style>