vue中子組件調(diào)用兄弟組件方法
小計: 開發(fā)中遇到子組件需要調(diào)用兄弟組件中的方法,如下寫個小demo記錄下心得,如果你有好的方法,請到評論區(qū)域指教
父組件示例代碼:
組件功能解析:
通過$emit獲取子組件事件,通過$ref調(diào)用子組件中事件,實現(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: []
}
},
// 注冊子組件
components: {
son1,
son2
},
methods: {
// 子組件2中click事件
triggerBrotherMethods() {
// 父組件通過$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ù),通過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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3配置路由ERROR in [eslint]報錯問題及解決
這篇文章主要介紹了Vue3配置路由ERROR in [eslint]報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue自定義組件實現(xiàn)v-model雙向數(shù)據(jù)綁定的方法
這篇文章主要介紹了Vue自定義組件實現(xiàn)v-model雙向數(shù)據(jù)綁定的方法,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-11-11
vue如何實現(xiàn)Json格式數(shù)據(jù)展示
這篇文章主要介紹了vue如何實現(xiàn)Json格式數(shù)據(jù)展示,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04
Element-ui Image圖片按需引入大圖預(yù)覽
這篇文章主要為大家介紹了Element-ui Image圖片按需引入大圖預(yù)覽實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
vue3聲明響應(yīng)式狀態(tài)使用(含ref,reactive,toRef(),toRefs()等)
這篇文章主要介紹了vue3聲明響應(yīng)式狀態(tài)使用(含ref,reactive,toRef(),toRefs()等),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue動態(tài)組件component標(biāo)簽的用法大全
這篇文章主要介紹了Vue動態(tài)組件component標(biāo)簽的用法,在Vue中,可以通過component標(biāo)簽的is屬性動態(tài)指定標(biāo)簽,本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08

