当前位置: 首页 > news >正文

vue 组件的常见8种通信方式

1、通过props传递‌,emit触发自定义事件:
父传子:子组件中通过props接收父组件传递的数据。
‌子传父:子组件通过emit触发一个事件,父组件监听这个事件来接收数据。
vue2:通过props和$emit
vue3:script中setup,自带defineProps,defineEmits
2.provide/inject‌:
provide和inject可以实现跨级组件的数据传递。provide在祖先组件中提供数据,inject在后代组件中注入数据‌。
3‌、使用ref‌子传父:
父组件可以通过$refs直接访问子组件的实例,从而调用子组件的方法或访问其数据。
Vue 2中,如果你想要通过$refs访问子组件的某个方法或数据,你不需要特别做任何事情来暴露它们。只要在子组件中定义了方法或者数据,你就可以直接通过this.$refs.yourRefName.methodOrProperty访问这些方法或属性
Vue 3中,需要在子组件中使用defineExpose函数来显式地暴露它们,在父组件定义ref变量并绑定到模板中。这是因为默认情况下,使用setup定义的所有局部变量和函数都是私有的,不会被父组件通过$refs访问到。也可以像 Vue 2 那样使用,但是在Options API( setup())中
 
//点击传值
<Vue ref="val"/>//引入子组件,使用ref调用该子组件 const val = ref()//定义变量 const p1 = reactive({name:'马云',age:52}) function btn(){ val.value.receive(p1) }

 

4‌、EventBus(全局事件总线)‌:
通过创建一个事件总线,实现非父子关系的组件之间的通信。这种方式适用于兄弟组件或跨多级的组件通信‌。
‌5、Vuex‌:
Vuex是一个状态管理库,适用于大型应用中组件间的状态管理。通过改变状态来通知其他组件更新‌。
6‌、插槽(Slots)‌:
插槽用于父组件向子组件插入内容,也可以用于子组件向父组件传递数据‌。
7‌、路由传参‌:
通过路由的params和query参数进行组件间的数据传递。这种方式适用于通过路由进行的数据传递‌。
8‌、attrs/listeners‌:
attrs用于父传子,子传孙的情况;listeners用于孙传子的反向通信。这种方式适用于祖先与后代组件之间的数据传递‌。
http://www.jsqmd.com/news/10315/

相关文章:

  • 251008
  • 2025浇注型聚氨酯厂家最新推荐榜:聚氨酯胶黏剂/聚氨酯胶辊/聚氨酯制品/聚氨酯原料/液体聚氨酯/聚氨酯浇注料/聚氨酯ABC料/浇筑聚氨酯/聚氨酯预聚物全场景实力厂家
  • 优化 IIS 应用程序池配置,告别 ASP.NET 冷启动延迟
  • C语言设计模式-策略模式
  • 动态张量运算自动优化技术解析
  • 多线程插入也是随机io,那为啥不用uuid
  • 国庆做题记录(含有一些trick)
  • 【Linux】如何移动材料/文件夹
  • [KaibaMath]1004 关于f(x,y) = [x]+[y] - [x+y]的平移稳定性
  • Mac OS 问题与技巧
  • 《算法设计与分析》第一章学习记录
  • mcp_server
  • 2025.10 国庆集训模拟赛总结
  • 详细介绍:https和http有什么区别-http各个版本有什么区别
  • CF2150F Cycle Closing
  • Easysearch 字段隐身之谜:source_reuse 与 ignore_above 的陷阱解析
  • QOJ856 Cactus 广义串并联图
  • CF2152 订题
  • TortoiseSVN账号切换 - 详解
  • GJ Round 2025赛季
  • resolvers: [ElementPlusResolver()] 有什么用? - 详解
  • ASP.NET Core 中读取 UserAgent 的正确姿势
  • Git学习记录(二):代码patch
  • 2025年10月化妆品代工厂最新推荐排行榜:聚焦 OEM/ODM/ 网红爆款需求,精选优质企业助品牌高效合作
  • Exchange安全漏洞分析:ProxyOracle攻击链详解
  • 将word档案转为kindle可识别的azw3材料的方法
  • 牛客 周赛111 20251008
  • 晶台光耦在手机PD快充上的应用 - 实践
  • bat批处理脚本文件-获取当前时间的几种方法
  • 二分图最大权完美匹配 KM算法