使用vue怎么在子組件中調用兄弟組件

本篇文章為大家展示了使用vue怎么在子組件中調用兄弟組件，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

父組件示例代碼：

組件功能解析： 

通過$emit獲取子組件事件，通過$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()
  },
 }
}
</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>

子組件二：

組件功能解析： 

加載父組件數據，通過click事件emit傳給父組件

<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>

上述內容就是使用vue怎么在子組件中調用兄弟組件，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。