vue3第一课：组件之间数据传递的几种方式

原创 已于 2024-11-25 15:41:13 修改 · 400 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue
于 2024-11-25 15:35:13 首次发布

**

1.父类->子类（多级子类）

**
父类使用- provide -向外提供某属性，子类 使用 inject 修改期变化，达到修改父类属性功能
比如全局loading 加载框 就可以使用这种方式，在App.vue 放置全局加载框，在子类控制其状态
在这里插入图片描述
子类使用
在这里插入图片描述
在这里插入图片描述
使用 TS 会爆红，因为没有 告知系统 showGlobalLoading 是个什么函数，这个是在 App.vue 里定义的，是一个接收布尔值的函数，可以不用理会，直接用就行

**

2.使用全局event bus 事件总线

**
新建一个工具类 EventBusUtils.ts 名字随意
在这里插入图片描述
其中 BUS_KEY_SEARCH 事件传递的 KEY 值，
使用方
在这里插入图片描述
在这里插入图片描述
接收方
在这里插入图片描述
在这里插入图片描述

3.使用全局状态管理器 vuex，或者 pinia

如何使用 这里不做赘述，资料很多

007小V
关注
Vue3组件开发及组件之间传递数据
weixin_44201223的博客
05-22 1116
组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。首先，在父组件中定义需要传递给子组件的值，接着，在父组件的模板中引入子组件，同时在引入子组件的标签中添加 props 属性并为其设置需要传递的值。在 Vue3 中，父组件通过 props 传递给子组件的值是响应式的。也就是说，如果在父组件中的传递的值发生了改变，子组件中的值也会相应地更新。//2.出发父组件对应的方法，调用defineEmites对应的属性。组件化：对js/css/html统一封装,这是VUE中的概念。
【Vue3】组件通信以及各种方式的对比
owo_ovo的博客
03-19 1873
【Vue3】组件通信以及各种方式的对比
Vue3组件传参
qq_44839718的博客
10-13 2万+
文章目录前言一、父子传值1.emit2.props3.provide和inject总结 前言 没啥好说的，淦就完事了，按照自己的认知简单的整理了一下vue3的组件传参…… 一、父子传值 1.emit 代码如下 (示例）： <template> <div> 子组件: <button @click="childEmit">传值给父组件</button> </div> </template> <script> e
Vue 3 中组件数据传递
qq_44136028的博客
03-31 666
通过 props 将数据从父组件传递到子组件。// 父组件：parent.vue。// 父组件：parent.vue。子组件：base-son.vue。子组件：base-son.vue。父组件：parent.vue。
vue3中的组件传值的方式
qwe0415的博客
04-25 3156
vue3组件传值
Vue进阶（六）：组件之间的数据传递
IT全栈 华强工作室
05-05 1万+
Vue组件作用域是孤立的，不允许在子组件模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。首先，用脚手架工具vue-cli创建一个项目，其中App.vue是父组件，components文件夹下都是子组件。
Vue组件之间传递数据的五种方式_详解
蒲公英芽的博客
04-04 1万+
Vue 组件之间数据传递的几种方式： 父组件向子组件传递数据，使用props属性；子组件向父组件中传递数据，在子组件中使用$emit派发事件，父组件中使用v-on 监听事件；缺点：组件嵌套层次多的话，传递数据比较麻烦。 祖先组件通过依赖注入(inject / provide)的方式，向其所有子孙后代传递数据；缺点：无法监听数据修改的来源，不支持响应式。 通过属性$root / $parent /...
Vue组件之间传递数据的五种方式
热门推荐
SiQianglove的博客
11-09 2万+
Vue 组件之间数据传递的几种方式： 父组件向子组件传递数据，使用props属性；子组件向父组件中传递数据，在子组件中使用$emit派发事件，父组件中使用v-on 监听事件；缺点：组件嵌套层次多的话，传递数据比较麻烦。 祖先组件通过依赖注入(inject / provide)的方式，向其所有子孙后代传递数据；缺点：无法监听数据修改的来源，不支持响应式。 通过属性$root / $parent / $children / ref，访问根组件、父级组件、子组件中的数据；缺点：要求组件之间要有传递性。 通过事件
vue3组件之间传值通讯
zzx262625的博客
05-07 1042
Vue 3 提供了多种组件间传值和通讯的方式。以下将以长博客的形式，详细解释这些方法及其应用场景。
VUE3中的组件通信七种方法介绍与基本使用
qq_45820271的博客
02-29 4397
本文介绍了在vue3中进行组件之间传值的几种方式，包括使用props进行父传子，使用emits进行子传父，使用vuex，pinia，mitt进行组件间传值，使用provide/inject依赖注入进行祖孙间传值
Vue3组件通信（父传子，子传父，跨组件通信）
2302_81399643的博客
12-08 6635
本文主要是讲述Vue3在setup语法糖下的组件间通信。一、父传子组件通信 ，通过defineProps声明接收props ；二、子传父组件通信，通过 defineEmits注册一个自定义事件，而后触发emits去调用该自定义事件 ；三、跨组件通信 （依赖注入 provide 和 inject），若使用了 provide 和 inject 来进行数据传递,则一般不需要再使用 defineProps
总结Vue3的11种传参通信方式，非常齐全
talentT的博客
04-14 1万+
vue3出来很久了，也非常成熟了，平时项目只管用也没多想，直至今天想写一编关于vue3传参，然后我总结一下竟然总结出来11种方式那么多，11种我分别列了出来，由于vue3有两种setup写法，下面我将用最简洁的代码例子针对主流的父传子子传父兄弟组件传参（mitt）$attrsrefsv-model路由传参vuex传参pinia传参浏览器缓存空闲想总结一下，纯人工肝了一天终于写好了，我尽量用最简洁易懂的方式写了，如果有什么写错了或者不够明细都欢迎大家指出。
Vue 3 中，组件间传值有多种方式
weixin_39277183的博客
08-08 2605
在 Vue 3 中，组件间传值有多种方式，以下是几种常见的方式
Vue3组件通信13种方法
weixin_49295874的博客
09-20 4069
总结这 13 种方法涵盖了 Vue 3 中几乎所有的组件通信场景。根据你的具体需求和应用规模,选择最合适的通信方式。好的组件设计能够简化通信,提高代码的可维护性。
Vue---11种组件传值方式总结，总有一款适合你
绝世唐门三哥的博客，多多关注，会不定期产出高质量文章和大家共享！
08-08 3359
以上示例代码展示了Vue 2中不同组件间通信方法的实现方式。注意，对于Pinia和Vue 3+特有的通信方式，这里没有提供Vue 2的示例代码。
VUE3中的组件通信六种方法
最新发布
weixin_42339193的博客
04-28 1370
Props 是最常用的父组件向子组件传递数据的方式。父组件通过属性绑定将数据传递给子组件，子组件使用 defineProps 来接收数据。父组件<template>{name:“我是测试数据”}]);</script>子组件```bash<template>list: {});
vue3组件之间数据传递
123
03-14 8817
1. 父传子 遵循vue的单向数据流，就是父组件能往子组件传递数据，但是子组件不能回传，父组件传递子组件数据的方式 就是在组件标签上使用属性绑定的方式进行传递，子组件中定义props对象，定义需要接受的数据，在setup中的props定义 父传子类型 父组件 <template> <div>parent</div> <Child></Child> </template> <script> import Chi
Vue 3组件通信13种方法
阿超的博客
07-30 1517
在 Vue 3 中,组件之间的通信是构建应用程序的关键。本指南将介绍 13 种不同的组件通信方法,从最简单到最复杂,帮助你选择最适合你需求的方式。这 13 种方法涵盖了 Vue 3 中几乎所有的组件通信场景。根据你的具体需求和应用规模,选择最合适的通信方式。记住,好的组件设计能够简化通信,提高代码的可维护性。
VUE3传值相关六种方法
weixin_51263829的博客
01-29 1万+
父传子，子传父
Vue.js 学习总结（8）—— Vue 3 的 Teleport 特性，让你实现跨组件传输内容
科技D人生
06-10 1764
在 Vue 3 中，Teleport 是一个新的内置组件，它允许你将子组件或 DOM 元素渲染到指定的 DOM 节点之外。简而言之，你可以将某个组件“传送”到另一个地方，而不必让它们局限于父组件的 DOM 树结构中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值