本篇文章為大家展示了使用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怎么在子組件中調用兄弟組件，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創新互聯行業資訊頻道。

網站標題：使用vue怎么在子組件中調用兄弟組件
轉載注明：http://www.js-pz168.com/article14/ghooge.html

成都網站建設公司_創新互聯，為您提供建站公司、網站改版、動態網站、品牌網站建設、移動網站建設、標簽優化

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯