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

父组件示例代码： 组件功能解析： 通过ref调用子组件中事件，实现子组件二的click事件 调用兄弟组件一中的事件

<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: []
  }
 },
 // 注册子组件
 components: {
  son1,
  son2
 },
 methods: {
  // 子组件2中click事件
  triggerBrotherMethods() {
   // 父组件通过$ref调用子组件1中的事件方法
   this.$refs.borther[0].bortherMethods()
  },//欢迎加入全栈开发交流圈一起学习交流：864305860
 }//面向1-3年前端人员
}//帮助突破技术瓶颈，提升思维能力
</script> 
<style lang="less" scoped>
/* .... */
</style>
复制代码

子组件一 组件功能解析： 加载父组件数据，进行业务操作

<template>
 <!-- 子组件son2 -->
 <div @click="bortherMethods">
  <!-- 父组件传值展示 -->
  {{dataFromFather}}
 </div>
</template>
 
<script>
export default {
 data() {
  return {
  }
 },
 props: ['dataFromFather'],
 methods: {
  // 兄弟组件中的按钮事件
  bortherMethods() {
   // 子组件事件方法
   ...
  },//欢迎加入全栈开发交流圈一起学习交流：864305860
 }//面向1-3年前端人员
}//帮助突破技术瓶颈，提升思维能力
</script>
 <style lang="less" scoped>
/* .... */
</style>
复制代码

子组件二： 组件功能解析： 加载父组件数据，通过click事件emit传给父组件

<template>
 <!-- 子组件son2 -->
 <div @click="triggerBrotherMethods">
  <!-- 父组件传值展示 -->
  {{dataFromFather}}
 </div>
</template> 
<script>
export default {
 data() {
  return {
  }
 },
 props: ['dataFromFather'],
 methods: {
  // 触发兄弟组件中的按钮事件
  triggerBrotherMethods() {
   this.$emit('clickBrotherBtn', true)
  },//欢迎加入全栈开发交流圈一起学习交流：864305860
 }//面向1-3年前端人员
}//帮助突破技术瓶颈，提升思维能力
</script> 
<style lang="less" scoped>
/* .... */
</style>
复制代码

结语

感谢您的观看，如有不足之处，欢迎批评指正。

本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。 最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。