Vue 组件通信的方式主要有以下几种: 1
ztj100 2024-11-12 14:22 37 浏览 0 评论
Vue 组件通信的方式主要有以下几种：
1. 父子组件通信
props / $emit：这是最常用的父子组件通信方式。父组件通过 props 向子组件传递数据，子组件通过 $emit 触发自定义事件来向父组件发送数据。
ref：父组件可以通过 ref 属性获取子组件的实例，然后直接调用子组件的方法或访问子组件的属性来进行通信。
provide / inject：Vue 3.0 提供了 provide 和 inject 两个新的 API，用于在非父子组件之间共享数据和方法。
2. 兄弟组件通信
eventBus：eventBus 是一个事件总线，可以用来在任意组件之间传递事件。每个组件都可以向 eventBus 订阅或发布事件，从而实现通信。
vuex：vuex 是一个状态管理库，可以用来在多个组件之间共享状态。
3. 跨级组件通信
$parent / $root：子组件可以通过 $parent 属性获取父组件的实例，然后通过父组件访问祖先组件。
attrs & listeners：父组件可以通过 attrs 属性将一些非 props 数据传递给子组件，子组件可以通过 listeners 属性监听父组件的自定义事件。
选择哪种通信方式取决于具体的场景：
父子组件通信：如果父子组件之间存在层级关系，建议使用 props / $emit 或 ref 方式进行通信。
兄弟组件通信：如果组件之间没有层级关系，建议使用 eventBus 或 vuex 方式进行通信。
跨级组件通信：如果需要在非父子组件之间共享数据或方法，可以使用 provide / inject 或 $parent / $root / attrs & listeners 方式进行通信。
以下是一些额外的建议：
尽量避免在组件之间直接修改数据，应该使用单向数据流的方式进行通信。
如果需要在多个组件之间共享状态，建议使用 vuex 进行管理。
相关推荐
- Vue3非兼容变更——函数式组件（vue 兼容）
-
在Vue2.X中，函数式组件有两个主要应用场景：作为性能优化，因为它们的初始化速度比有状态组件快得多；返回多个根节点。然而在Vue3.X中，有状态组件的性能已经提高到可以忽略不计的程度。此外，有状态组...
- 利用vue.js进行组件化开发，一学就会(一)
-
组件原理/组成组件（Component）扩展HTML元素，封装可重用的代码，核心目标是为了可重用性高，减少重复性的开发。组件预先定义好行为的ViewModel类。代码按照template\styl...
- Vue3 新趋势:10 个最强 X 操作!（vue.3）
-
Vue3为前端开发带来了诸多革新，它不仅提升了性能，还提供了...
- 总结 Vue3 组件管理 12 种高级写法，灵活使用才能提高效率
-
SFC单文件组件顾名思义，就是一个.vue文件只写一个组件...
- 前端流行框架Vue3教程:17. _组件数据传递
-
_组件数据传递我们之前讲解过了组件之间的数据传递，...
- 前端流行框架Vue3教程:14. 组件传递Props效验
-
组件传递Props效验Vue组件可以更细致地声明对传入的props的校验要求...
- 前端流行框架Vue3教程:25. 组件保持存活
-
25.组件保持存活当使用...
- 5 个被低估的 Vue3 实战技巧，让你的项目性能提升 300%?
-
前端圈最近都在卷性能优化和工程化，你还在用老一套的Vue3开发方法？作为摸爬滚打多年的老前端，今天就把私藏的几个Vue3实战技巧分享出来，帮你在开发效率、代码质量和项目性能上实现弯道超车！一、...
- 绝望!Vue3 组件频繁崩溃?7 个硬核技巧让性能暴涨 400%!
-
前端的兄弟姐妹们五一假期快乐，谁还没在Vue3项目上栽过跟头？满心欢喜写好的组件，一到实际场景就频频崩溃，页面加载慢得像蜗牛，操作卡顿到让人想砸电脑。用户疯狂吐槽，领导脸色难看，自己改代码改到怀疑...
- 前端流行框架Vue3教程:15. 组件事件
-
组件事件在组件的模板表达式中，可以直接使用...
- Vue3，看这篇就够了（vue3 从入门到实战）
-
一、前言最近很多技术网站，讨论的最多的无非就是Vue3了，大多数都是CompositionAPI和基于Proxy的原理分析。但是今天想着跟大家聊聊，Vue3对于一个低代码平台的前端更深层次意味着什么...
- 前端流行框架Vue3教程:24.动态组件
-
24.动态组件有些场景会需要在两个组件间来回切换，比如Tab界面...
- 前端流行框架Vue3教程:12. 组件的注册方式
-
组件的注册方式一个Vue组件在使用前需要先被“注册”，这样Vue才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册...
- 焦虑!Vue3 组件频繁假死?6 个奇招让页面流畅度狂飙 500%!
-
前端圈的朋友们，谁还没在Vue3项目上踩过性能的坑？满心期待开发出的组件，一到高并发场景就频繁假死，用户反馈页面点不动，产品经理追着问进度，自己调试到心态炸裂！别以为这是个例，不少人在电商大促、数...
- 前端流行框架Vue3教程:26. 异步组件
-
根据上节课的代码，我们在切换到B组件的时候，发现并没有网络请求：异步组件：...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)