vue3_硅谷甄选_008_provide和inject实现隔代数据传递

于 2024-08-27 22:14:00 发布
阅读量106 收藏
点赞数 2
分类专栏： # 硅谷甄选 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41748874/article/details/141613824
版权

文章目录

Provide与inject

vue3提供了两个方法：provide和inject方法；

他们两个可以实现隔代组件数据传递；

provide()

父组件通过provide()提供数据；

第一个参数是key，第二个参数是提供的数据；

provide("TOKEN", car);

inject()

子组件或者孙子组件可以使用这个数据；

let car = inject('TOKEN');

如果在孙子组件内部修改数据，那么父组件数据也会修改，他们用的是同一份数据；

codelyq
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
带你快速上手Vue3
volson13的博客
10-12 417
vue
vue3_硅谷甄选_002_vue3中props通信使用defineProps
浪漫韫秋
08-03 1007
实现子组件，向，父组件，传递数据。
《硅谷甄选》项目笔记
starry-sea1412的弃坑之路
05-20 5370
这篇文章是项目实战硅谷甄选的笔记，该项目采用最新的Vue3版本+组合式API开发方式。
[Vue]Vue3学习笔记(尚硅谷)
emmmm.....
01-04 5515
创建Vue3项目 vue-cli vite 项目结构 Vue3开发者工具的安装 初识setup ref 函数 reactive函数 Vue3.0中的响应式原理 vue2.x的响应式 Vue3.0的响应式 reactive对比ref setup的两个注意点 computed函数 watch函数 watchEffect函数 生命周期 自定义hook函数 toRef shallowReactive readonly 与 shallowReadonly toRaw 与 markRaw
硅谷甄选运营平台-vue3组件通信方式
qq_47296476的博客
07-09 440
在vue框架中事件分为两种:一种是原生的DOM事件，另外一种自定义事件。原生DOM事件可以让用户与网页进行交互，比如click、dbclick、change、mouseenter、mouseleave....自定义事件可以实现子组件给父组件传递数据自定义事件可以实现子组件给父组件传递数据.在项目中是比较常用的。比如在父组件内部给子组件(Event2)绑定一个自定义事件在Event2子组件内部触发这个自定义事件我是子组件2
项目准备知识---vue3组件通信方式总结
m0_55644132的博客
05-16 809
在vue框架中事件分为两种：一种是原生的DOM事件，另外一种自定义事件。（vue2中需要添加 .native）原生DOM事件可以让用户与网页进行交互，比如click、dbclick、change、mouseenter、mouseleave…自定义事件可以实现子组件给父组件传递数据自定义事件可以实现子组件给父组件传递数据，在项目中是比较常用的。比如在父组件内部给子组件(Event2)绑定一个自定义事件在Event2子组件内部触发这个自定义事件
尚硅谷Vue2-3(张天禹老师) 学习笔记
w小浩的博客
07-30 4435
......
尚硅谷Vue项目实战硅谷甄选笔记——2024.01.02
weixin_44977914的博客
01-03 3101
在vue框架中事件分为两种:一种是原生的DOM事件，另外一种自定义事件。原生DOM事件可以让用户与网页进行交互，比如click、dbclick、change、mouseenter、mouseleave…自定义事件可以实现子组件给父组件传递数据自定义事件可以实现子组件给父组件传递数据.在项目中是比较常用的。比如在父组件内部给子组件(Event2)绑定一个自定义事件在Event2子组件内部触发这个自定义事件我是子组件2
尚硅谷Vue3入门到实战，最新版Vue3+TypeScript前端开发教程
qq_47296476的博客
06-04 1119
2020年9月18日，Vue.js发布版3.0One Piece（海贼王）4800+次提交40+个RFC600+次PR300+贡献者3.3.4setup是Vue3中一个新的配置项，值是一个函数，它是“表演的舞台，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在之前调用，它是“领先”所有钩子执行的。
vue 解决provide和inject响应的问题
01-21
官网上说provide 和 inject 绑定并不是可响应的。...要实现父子组件响应，父组件传递的数据类型必须是对象Object，子组件接收的数据类型必须是对象Object，其他数据类型都是不好使的 provide和inject响应的例子： 父
详解Vue 多级组件透传新方法provide/inject
08-27
* 简洁的代码：使用provide/inject可以简洁地实现数据传递，不需要层层传递props。 * 灵活的数据传递：provide/inject可以实现任意级别的数据传递，不受组件层次结构的限制。 * 清晰的数据流：使用provide/inject...
Vue中的Provide/Inject 实现响应式数据
qq_57558631的博客
05-23 4782
Vue中， Provide/Inject实现了跨组件的通信。但可惜数据并不是响应式的（设计如此）。 提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的 以上引用自官网 可能之所以这样设计，是为了避免数据的混乱。就如同props不能被子组件直接修改一样。 从代码角度讲 data() { return { foo: 'foo', bar: 'bar...
避坑18_Vue祖孙组件通过provide/inject异步传值，孙组件拿不到数据
linxwx的博客
11-15 2607
provide/inject的绑定并不是可响应的。需要传入了一个可监听的对象，该对象的属性是可响应的
vue3插件原理
m0_46281382的博客
08-26 727
简述vue3中use方法加载第三方插件原理
vue export的用法
weixin_41203765的博客
08-23 580
在Vue.js中，export关键字主要用于模块化编程，它允许你将一个文件（模块）中的代码、组件、函数、变量等导出，以便在其他文件中通过import语句来使用。这在Vue项目中非常常见，特别是当你需要重用组件、工具函数或配置时。
knowLedge-无关系组件间方法的调用(创建新的 Vue 实例来作为事件总线（Event Bus）方法实现)
2301_76671906的博客
08-23 555
无关系组件间方法的调用(创建新的 Vue 实例来作为事件总线（Event Bus）方法实现)
如何使用Vue 3和Type Script进行组件化设计
最新发布
yang295242361的博客
08-27 563
在Vue 3中，Composition API 是一种全新的逻辑复用和代码组织方式，它允许你将组件的逻辑（如响应式状态、计算属性、方法、生命周期钩子等）封装到单独的函数中，从而提高了代码的可复用性和可维护性。以下是如何在Vue 3中使用Composition API的基本步骤。
移动端签名
notagoodwriter的博客
08-23 637
【代码】移动端签名。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值