Vue3组件通讯六种方式

简介: 【10月更文挑战第3天】

在 Vue3 中,有以下六种常见的组件通讯方式:

一、父组件向子组件传递数据(Props 传递)

父组件通过在子组件标签上添加属性的方式,将数据传递给子组件。子组件在定义时通过props选项接收这些数据。

二、子组件向父组件传递数据(自定义事件)

子组件通过$emit方法触发自定义事件,并将数据作为参数传递给父组件,父组件通过在子组件标签上监听相应的事件来接收数据。

三、兄弟组件通讯(通过共同的父组件或状态管理库)

  1. 共同的父组件:兄弟组件可以通过共同的父组件来中转数据。
  2. 状态管理库:如 Vuex,将数据存储在全局状态中,让兄弟组件都能访问和修改。

四、跨层级组件通讯(事件总线)

创建一个全局的事件总线,组件可以通过它来发送和接收事件,实现跨层级的通讯。

五、依赖注入(Provide / Inject)

父组件通过provide提供数据,子组件通过inject来注入接收这些数据。

六、插槽传递数据

父组件可以通过插槽将数据传递给子组件,子组件可以在插槽内容中获取这些数据。

示例

  1. 父组件向子组件传递数据
<ChildComponent :message="parentMessage" />

子组件接收:

defineProps(['message'])
  1. 子组件向父组件传递数据
this.$emit('customEvent', data);

父组件监听:

<ChildComponent @customEvent="handleEvent" />
  1. 兄弟组件通过共同父组件通讯

父组件作为中转:

<ChildComponent1 @customEvent="handleEventFromChild1" />
<ChildComponent2 @customEvent="handleEventFromChild2" />
  1. 跨层级组件通讯(事件总线)
const eventBus = new Vue();

// 发送事件
eventBus.$emit('eventName', data);

// 接收事件
eventBus.$on('eventName', (data) => {
   
  // 处理数据
});
  1. 依赖注入

父组件提供:

provide('data', someData);

子组件注入:

defineInject(['data'])
  1. 插槽传递数据

父组件:

<ChildComponent>
  <span>{
  { slotData }}</span>
</ChildComponent>

子组件接收:

<slot />

以上是 Vue3 中常见的组件通讯方式,根据具体的场景和需求,选择合适的通讯方式可以使组件之间的协作更加顺畅,提高开发效率和代码的可读性。

相关文章
|
3天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
47 1
|
3月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
515 0
|
3月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
1月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
230 1
|
1月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
140 0
|
2月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
89 0
|
3月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
191 1
|
5月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
724 4
|
4月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
523 77
|
2月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
94 0