vue3父子組件通信、兄弟組件實(shí)時(shí)通信方式
更新時(shí)間：2023年06月08日 09:48:00 作者：acheding
這篇文章主要介紹了vue3父子組件通信、兄弟組件實(shí)時(shí)通信方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
1.父組件向子組件通信
父組件：Father
<script setup>
import OneSon from "./oneSon.vue";
import { reactive } from "vue";
const state = reactive({
fatherData: "I am from Father.",
});
</script>
<template>
<p>I am Father.</p>
<OneSon :fatherDataName="state.fatherData"></OneSon>
</template>
<style scoped></style>子組件：OneSon
<script setup>
import { defineProps } from "vue";
defineProps({
fatherDataName: String,
});
</script>
<template>
<p>I am OneSon.</p>
<p>{{ fatherDataName }}</p>
</template>
<style scoped></style>效果：
2.子組件向父組件通信
子組件：OneSon
<script setup>
import { reactive, defineEmits } from "vue";
const state = reactive({
sonData: "I am from Son.",
});
const emit = defineEmits(["sonDataName"]);
const emitSonData = () => {
emit("sonDataName", state.sonData);
};
</script>
<template>
<p @click="emitSonData">I am OneSon.</p>
</template>
<style scoped></style>父組件：Father
<script setup>
import OneSon from "./oneSon.vue";
import { reactive } from "vue";
const state = reactive({
receive: "",
});
const getSonData = (value) => {
state.receive = value;
};
</script>
<template>
<p>I am Father.</p>
<OneSon @sonDataName="getSonData"></OneSon>
<p>{{ state.receive }}</p>
</template>
<style scoped></style>效果：
3.兄弟組件實(shí)時(shí)通信
子組件1：OneSon
<script setup>
import { reactive, defineEmits } from "vue";
const state = reactive({
sonData: true,
});
const emit = defineEmits(["sonDataName"]);
const emitSonData = () => {
emit("sonDataName", state.sonData);
};
</script>
<template>
<p @click="emitSonData">I am OneSon.</p>
</template>
<style scoped></style>子組件2：AnotherSon
<script setup>
import { reactive, defineExpose } from "vue";
const state = reactive({
display: false,
});
const showAnotherSon = (val) => {
state.display = val;
};
const hidden= () => {
state.display = false;
};
defineExpose({ showAnotherSon });
</script>
<template>
<p v-if="state.display" @click="hidden()">I am AnotherSon.</p>
</template>
<style scoped></style>父組件：Father
<script setup>
import OneSon from "./oneSon.vue";
import AnotherSon from "./anotherSon.vue";
import { ref } from "vue";
const anotherSon = ref(null);
const getSonData = (val) => {
anotherSon.value.showAnotherSon(val);
};
</script>
<template>
<p>I am Father.</p>
<OneSon @sonDataName="getSonData"></OneSon>
<AnotherSon ref="anotherSon"></AnotherSon>
</template>
<style scoped></style>效果：
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue2和Vue3的區(qū)別以及其鉤子函數(shù)的使用
Vue.js?3?和?Vue.js?2?是兩個(gè)主要版本的流行前端框架,它們之間有很多區(qū)別,包括性能優(yōu)化、新特性和改進(jìn)的API等,下面就跟隨小編一起來看看他們的使用區(qū)別吧2024-01-01
vue項(xiàng)目登錄模塊滑塊拼圖驗(yàn)證功能實(shí)現(xiàn)代碼(純前端)
滑塊驗(yàn)證作為一種反機(jī)器人的工具,也會(huì)不斷發(fā)展和演進(jìn),以適應(yīng)不斷變化的威脅,這篇文章主要給大家介紹了vue項(xiàng)目登錄模塊滑塊拼圖驗(yàn)證功能實(shí)現(xiàn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
Vue項(xiàng)目的網(wǎng)絡(luò)請(qǐng)求代理到封裝步驟詳解
這篇文章主要介紹了Vue項(xiàng)目的網(wǎng)絡(luò)請(qǐng)求代理到封裝步驟,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
vue采用EventBus實(shí)現(xiàn)跨組件通信及注意事項(xiàng)小結(jié)
EventBus是一種發(fā)布/訂閱事件設(shè)計(jì)模式的實(shí)踐。這篇文章主要介紹了vue采用EventBus實(shí)現(xiàn)跨組件通信及注意事項(xiàng),需要的朋友可以參考下2018-06-06
Vue項(xiàng)目中ESLint配置超全指南(VScode)
ESLint是一個(gè)代碼檢查工具,用來檢查你的代碼是否符合指定的規(guī)范,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中ESLint配置(VScode)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue-i18n使用$t導(dǎo)致的Typescript報(bào)錯(cuò)問題及解決
在Vue3項(xiàng)目中使用vue-i18n?v9.14.0時(shí),$t屬性可能因類型未聲明導(dǎo)致TS報(bào)錯(cuò),解決方案是創(chuàng)建src/vue-i18n.d.ts文件,添加至tsconfig.json的include項(xiàng)中,聲明$t屬性類型2025-08-08
微信小程序?qū)崙?zhàn)基于vue2實(shí)現(xiàn)瀑布流的代碼實(shí)例
瀑布流，又稱瀑布流式布局，是比較流行的一種網(wǎng)站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部，這篇文章主要介紹了微信小程序?qū)崙?zhàn)，基于vue2實(shí)現(xiàn)瀑布流,需要的朋友可以參考下2022-12-12
本文主要介紹了vue3的內(nèi)置組件匯總,詳細(xì)的介紹了Fragment,Teleport,Suspense三個(gè)組件的使用,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
Vue3+vite創(chuàng)建項(xiàng)目方式
本文介紹了如何使用Vite創(chuàng)建Vue項(xiàng)目,包括版本升級(jí)、命令變化以及配置vue-router、Vuex和AntDesignVue的方法,同時(shí),也提供了降級(jí)Vue?CLI以兼容Vue2項(xiàng)目的步驟2024-12-12
Vue?3?emit參數(shù)數(shù)量不匹配問題深度解析與最佳實(shí)踐指南
在Vue3中emit函數(shù)是用于子組件向父組件發(fā)送事件的關(guān)鍵機(jī)制,這篇文章主要介紹了Vue?3?emit參數(shù)數(shù)量不匹配問題深度解析與最佳實(shí)踐的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-11-11