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

更新時(shí)間：2018年07月06日 10:26:12 作者：blankPage

這篇文章主要介紹了vue中子組件調(diào)用兄弟組件方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

小計(jì)：開(kāi)發(fā)中遇到子組件需要調(diào)用兄弟組件中的方法，如下寫(xiě)個(gè)小demo記錄下心得，如果你有好的方法，請(qǐng)到評(píng)論區(qū)域指教

父組件示例代碼：

組件功能解析：

通過(guò)$emit獲取子組件事件，通過(guò)$ref調(diào)用子組件中事件，實(shí)現(xiàn)子組件二的click事件

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

子組件一

組件功能解析：

加載父組件數(shù)據(jù)，進(jìn)行業(yè)務(wù)操作

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

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

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

子組件二：

組件功能解析：

加載父組件數(shù)據(jù)，通過(guò)click事件emit傳給父組件

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue表情輸入組件微信face表情組件
這篇文章主要為大家詳細(xì)介紹了Vue表情輸入組件，微信face表情組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-02-02
vue實(shí)現(xiàn)計(jì)步器功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)計(jì)步器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11
vue中改變了vuex數(shù)據(jù)視圖不更新,也監(jiān)聽(tīng)不到的原因及解決
這篇文章主要介紹了vue中改變了vuex數(shù)據(jù)視圖不更新,也監(jiān)聽(tīng)不到的原因及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue如何實(shí)現(xiàn)利用vuex永久儲(chǔ)存數(shù)據(jù)
這篇文章主要介紹了Vue如何實(shí)現(xiàn)利用vuex永久儲(chǔ)存數(shù)據(jù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
Element中table組件按照屬性執(zhí)行合并操作詳解
在我們?nèi)粘ｉ_(kāi)發(fā)中，表格業(yè)務(wù)基本是必不可少的，對(duì)于老手來(lái)說(shuō)確實(shí)簡(jiǎn)單，家常便飯罷了，但是對(duì)于新手小白如何最快上手搞定需求呢？本文從思路開(kāi)始著手，幫你快速搞定表格
2022-11-11
詳解Vue如何實(shí)現(xiàn)顏色選擇與調(diào)色板功能
顏色選擇和調(diào)色板是Web開(kāi)發(fā)中常用的功能，Vue作為一個(gè)流行的JavaScript框架，可以方便地實(shí)現(xiàn)顏色選擇和調(diào)色板功能，本文講講如何在Vue中進(jìn)行顏色選擇和調(diào)色板吧
2023-06-06
Element Input組件分析小結(jié)
這篇文章主要介紹了Element Input組件分析小結(jié)，詳細(xì)的介紹了Input組件的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
Vue組件通信方法案例總結(jié)
這篇文章主要介紹了Vue組件通信方法案例總結(jié),本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-09-09
vue實(shí)現(xiàn)商品購(gòu)物車(chē)全選反選
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商品購(gòu)物車(chē)全選反選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue實(shí)現(xiàn)一個(gè)動(dòng)態(tài)添加行的表格步驟詳解
在Vue組件中定義表格的數(shù)據(jù)模型,通常使用一個(gè)數(shù)組來(lái)存儲(chǔ)表格的數(shù)據(jù),每一行數(shù)據(jù)可以是一個(gè)對(duì)象,對(duì)象的屬性對(duì)應(yīng)表格的列,這篇文章主要介紹了Vue實(shí)現(xiàn)一個(gè)動(dòng)態(tài)添加行的表格步驟詳解,需要的朋友可以參考下
2024-05-05