vue3父子组件通信、兄弟组件实时通信方式
更新时间：2023年06月08日 09:48:00 作者：acheding
这篇文章主要介绍了vue3父子组件通信、兄弟组件实时通信方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
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.兄弟组件实时通信
子组件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>效果：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue.js 3 和 Vue.js 2 是两个主要版本的流行前端框架,它们之间有很多区别,包括性能优化、新特性和改进的API等,下面就跟随小编一起来看看他们的使用区别吧2024-01-01
滑块验证作为一种反机器人的工具,也会不断发展和演进,以适应不断变化的威胁,这篇文章主要给大家介绍了vue项目登录模块滑块拼图验证功能实现的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了Vue项目的网络请求代理到封装步骤,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
EventBus是一种发布/订阅事件设计模式的实践。这篇文章主要介绍了vue采用EventBus实现跨组件通信及注意事项,需要的朋友可以参考下2018-06-06
ESLint是一个代码检查工具,用来检查你的代码是否符合指定的规范,下面这篇文章主要给大家介绍了关于Vue项目中ESLint配置(VScode)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
vue-i18n使用$t导致的Typescript报错问题及解决
在Vue3项目中使用vue-i18n v9.14.0时,$t属性可能因类型未声明导致TS报错,解决方案是创建src/vue-i18n.d.ts文件,添加至tsconfig.json的include项中,声明$t属性类型2025-08-08
瀑布流，又称瀑布流式布局，是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，这篇文章主要介绍了微信小程序实战，基于vue2实现瀑布流,需要的朋友可以参考下2022-12-12
本文主要介绍了vue3的内置组件汇总,详细的介绍了Fragment,Teleport,Suspense三个组件的使用,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
本文介绍了如何使用Vite创建Vue项目,包括版本升级、命令变化以及配置vue-router、Vuex和AntDesignVue的方法,同时,也提供了降级Vue CLI以兼容Vue2项目的步骤2024-12-12
Vue 3 emit参数数量不匹配问题深度解析与最佳实践指南
在Vue3中emit函数是用于子组件向父组件发送事件的关键机制,这篇文章主要介绍了Vue 3 emit参数数量不匹配问题深度解析与最佳实践的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-11-11
最新评论