🌟 前言
欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍
🤖 洛可可白:个人主页
🔥 个人专栏:✅前端技术 ✅后端技术
🏠 个人博客:洛可可白博客
🐱 代码获取:bestwishes0203
📷 封面壁纸:洛可可白wallpaper
文章目录
- Vue2和Vue3组件通信:父子与兄弟间的桥梁
- 父组件向子组件传递数据
- 子组件向父组件传递数据
- 兄弟组件间的数据传输
- 使用`provide`/`inject` API
- 跨层级组件间的数据传输
- 使用事件总线
- 结语
- 🎉 往期精彩回顾
Vue2和Vue3组件通信:父子与兄弟间的桥梁
在构建Vue应用时,掌握组件间的数据传输是至关重要的。本文将深入探讨Vue 2和Vue 3中父子组件间的通信机制,以及兄弟组件如何通过provide
/inject
API进行数据共享。我们还将讨论跨层级组件通信的策略,包括使用事件总线(Event Bus)的模式。通过实用的代码示例和清晰的解释,你将学习到如何有效地在不同层级的Vue组件之间传递数据。无论你是Vue新手还是有经验的开发者,本文都将帮助你更好地理解和应用Vue的组件通信模式,从而构建出更加健壮和可维护的应用程序。
父组件向子组件传递数据
<!-- 父组件 -->
<template>
<ChildComponent :parentMessage="message" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const message = ref('来自父组件的消息');
</script>
<!-- 子组件 -->
<template>
<div>{{ parentMessage }}</div>
</template>
<script setup lang="ts">
import { defineProps } from 'vue';
const props = defineProps({
parentMessage: String
});
</script>
子组件向父组件传递数据
<!-- 子组件 -->
<template>
<button @click="sendMessageToParent">点击我发送消息给父组件</button>
</template>
<script setup lang="ts">
import { defineEmits } from 'vue';
const emit = defineEmits(['message-from-child']);
function sendMessageToParent() {
emit('message-from-child', '这是来自子组件的消息');
}
</script>
<!-- 父组件 -->
<template>
<ChildComponent @message-from-child="receiveMessage" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const receiveMessage = (message: string) => {
console.log('父组件接收到的消息:', message);
}
</script>
兄弟组件间的数据传输
使用provide
/inject
API
<!-- 父组件 -->
<script setup lang="ts">
import { ref, provide } from 'vue';
import SiblingComponentA from './SiblingComponentA.vue';
import SiblingComponentB from './SiblingComponentB.vue';
const sharedData = ref('兄弟组件共享的数据');
provide('sharedDataKey', sharedData.value);
</script>
<!-- 兄弟组件A -->
<script setup lang="ts">
import { inject } from 'vue';
const sharedData = inject('sharedDataKey');
</script>
<!-- 兄弟组件B -->
<script setup lang="ts">
import { inject } from 'vue';
const sharedData = inject('sharedDataKey');
</script>
跨层级组件间的数据传输
跨层级组件的通信可以使用Vuex或Vue 3的provide
/inject
API,或者通过事件总线(Event Bus)。
使用事件总线
// eventBus.ts
import { reactive, readonly } from 'vue';
export const EventBus = reactive({
events: new Map<string, Array<(...args: any[]) => void>>()
});
export function emit(event: string, ...args: any[]) {
if (EventBus.events.has(event)) {
EventBus.events.get(event)?.forEach(handler => handler(...args));
}
}
export function on(event: string, handler: (...args: any[]) => void) {
if (!EventBus.events.has(event)) {
EventBus.events.set(event, new Array<(...args: any[]) => void>());
}
EventBus.events.get(event)?.push(handler);
}
在需要发送事件的组件中:
<script setup lang="ts">
import { onMounted } from 'vue';
import { emit } from './eventBus';
onMounted(() => {
emit('event-name', { data: '这是来自子组件的消息' });
});
</script>
在需要接收事件的组件中:
<script setup lang="ts">
import { onMounted } from 'vue';
import { on } from './eventBus';
onMounted(() => {
on('event-name', (data) => {
console.log('接收到的事件数据:', data.data);
});
});
</script>
结语
使用 <script setup>
语法可以让我们以更简洁的方式编写Vue组件,尤其是在TypeScript的支持下,我们可以享受到更好的类型推断和自动补全。这使得组件间的通信代码更加清晰和易于维护。在构建大型应用时,合理地使用这些通信模式将有助于保持应用的模块化和可扩展性。
如果对你有帮助,点赞👍、收藏💖、关注🔔是我更新的动力!👋🌟🚀
🎉 往期精彩回顾
前端与后端协同:实现Excel导入导出功能 |
---|
Java日期格式化:掌握时间的艺术 |
JavaScript日期格式化:从原始值到用户友好的字符串 |
入门教程:Windows搭建C语言和EasyX开发环境 |
CentOS系统下Docker的安装教程 |
Spring Boot单元测试全指南:使用Mockito和AssertJ |
Yarn简介及Windows安装与使用指南 |
H5实现3D旋转照片墙教程 |
Element-Plus 实现动态渲染图标教程 |
MyBatis-Plus分页接口实现教程:Spring Boot中如何编写分页查询 |
Element-Plus下拉菜单边框去除教程 |