provide与inject传值,provide传递的值,如果不是引用类型,就不会响应变化

最新推荐文章于 2023-08-21 17:37:49 发布
最新推荐文章于 2023-08-21 17:37:49 发布
阅读量1.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41430522/article/details/114106149
版权

这里提一嘴,比如你渲染一个对象,然后点击一下,给这个对象动态添加属性,那么这个对象数据确实变化了,但是视图不会更新,不过数组不会有这个问题,对象就会有这个问题

原因和解决方法见这篇文章 https://segmentfault.com/a/1190000014826146

而provide与inject传值比较离谱,刚好和这个反过来了

如果你传bool,string这种,他就不会动态变化,而如果是object,则能够视图响应数据变化

如图

当我点击登录,触发login方法,改变via和bb.a,视图上via不会改变,还是原来的值,bb.a则会相应变成改变后的值

烟雨浥轻尘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
inject/provide与响应式数据
riddle1981的博客
08-28 2382
provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 说人话就是如果你把对象都改了那这个改动就追踪不到了，如果你就改了个对象属性那这种响应就能追踪到。以下是具体的代码分析。 这意味着，出于某种考虑，vue故意将provide/inject设定为不可响应的。也就是说如果你的provide的数据改变，inject是不会接受到这个改变，然而如果你provide的内容是一个可响应的数据，比如一个对象引用，那么这个对象的属性是可以
动态组件、Provide / Inject、异步组件
weixin_44211097的博客
10-27 575
一、动态组件 有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里： 父组件： <!-- 动态组件 --> <button @click="getComp('DynaA')">A</button> <button @click="getComp('DynaB')">b</button> <button @click="getComp('DynaC')">C<.
provide,inject跨组件传值 以及修复provide值改变而inject值未变问题
HQ\(^o^)/的博客
10-07 592
今天在写代码时,发现一样的请求、一样的代码有些重复，代码冗余，便想着怎么减少代码量，我就先看它们发送请求、重复的代码文件，结果发现，它们的根文件都是相同的，那便想到了跨组件传值，脑海第一时间想到的就是 provide 和inject毕竟 只需要在祖先的文件下使用 provide，后面的哪个后代后代的文件需要这个值的话，就可以直接使用inject接收就行了。
Vue中provide inject详解+数据响应式更新
cxz
06-30 1330
1. 概念 父辈们给祖孙传值, 不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，这就是它最大的特性。 2. 基本用法 provide 选项应该是：一个对象或返回一个对象的函数 inject 选项应该是：一个字符串数组，或 一个对象，对象的 [key] 是本地的绑定名 2.1 代码执行顺序： data provide created//在这个阶段$el还未生成，在这先处理privide的逻辑，子孙组件才可以取到inject值
vue中的provide和inject
xiaomajia029的博客
10-18 652
目录 一、语法 二、使用场景 三、关于 provide/inject 的响应问题 每次看到关于vue组件传值的文章，都会讲到provide和inject这种传值方法。但是在实际的项目开发中，基本没有看到过使用这个的场景（印象中之前看iview form组件代码的时候看到过），所以这应该用于什么场景当中呢？ 一、语法 用法详见vue document - provide/inject，在...
vue的provide无法监听变化
weixin_42458965的博客
08-20 3033
vue中的provide可以进行父组件向后代组件进行传值。但是，他没办法监听传输数据的变化。或者说明白点，就是如果我在父组件改变注入的值，它没办法更新。子组件改变传入的值，它也没办法进行更新 上图，vue官方例子说明 但是这个一个可监听的对象，那么其对象的属性是可响应的是啥意思？ 可监听的对象，是vue中data中的数据，并且data中的数据是一个对象，如图。 那监听他的属性，就是监听testA里面的b值 当b的值改变的时候，这个是可以监听到的 看上面，显示的是2b2b2b，而不是初始值bbb了 所
vue父组件给子组件的组件传值provide inject的方法
10-16
要注意的是，`provide` 中的值如果直接是基本类型（如数字、字符串等），那么后代组件通过 `inject` 接收后，这个值是无法响应式更新的。只有当 `provide` 的值是一个对象引用时，后代组件才能监听到这个对象的属性...
Vue.js中provide/inject实现响应式数据更新的方法示例
10-16
原因在于`provide/inject`本身并不支持响应式，它只是简单地传递了一个引用，而不是建立了一个响应式的依赖关系。当我们尝试在父组件中直接更改提供给子孙的属性（如`this._provided.foo`），子组件并不能感知到这个...
vue 解决provide和inject响应的问题
01-21
官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 provide： Object | () => Object（一个对象或返回一个对象的函数） inject...
Vue组件通信入门之Provide和Inject机制
10-15
主要给大家介绍了关于Vue组件通信入门之Provide和Inject机制的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue组件通信具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
13.（vue3.x+vite）组件间通信方式之provide与inject.rar
最新发布
09-19
需要注意的是，`provide`和`inject`并不是响应式的，这意味着如果在`provide`的值改变，子组件不会自动更新。若需要响应式的数据，建议使用`ref`或`reactive`来包裹提供给子孙组件的值。 另外，虽然`provide`和`...
vue依赖注入provide/inject
IT学霸
05-04 1102
一、前言 provide选项允许我们指定我们想要提供给子组件的数据/方法。在子组件种通过inject选项就可以使用provide提供的数据或方法。不论组件层次有多深，都可以调用。 唯一的缺点是：依赖注入所提供的数据是非响应式。比如说我在父组件种有个数据变量是响应式的接收用户输入的数据，然后我通过provide把这个数据变量提供给子组件使用，但是在子组件里面，这个变量不是实时变化的。要想得到最...
vue3 provide 和 inject 底层组件的值不是响应式的处理
weixin_45634433的博客
08-21 970
前景提示:在学习provide和inject是发现一个问题就是顶层组件使用功provide传递的值在基层组件中使用inject接收后不是响应式的,如下代码所示。博主的文章给予的帮助,在这里贴上链接,里面的内容更加的全面,大家有相关问题可以查阅。
vue3.x 通过provide inject实现组件之间的传值
Sheng6666的博客
12-13 675
1.非组合式api 1.1 在app.vue文件中通过provide定义变量 1.2 在需要的组件中通过inject接收数据 1.3 如果在父组件改变数据，子组件不会改变 2.通过组合式api 2.1父组件使用setup来定义数据 2.2子组件也要通过setup接收数据 2.3父组件改变数据，子组件也会发生改变 2.4父组件也可以传递对象 2.5 通过v-model双向数据绑定，子组件如果改变数据，父组件也会发生改变 ...
vue中使用provide-inject传值注意的问题
m0_50441807的博客
02-27 459
以上的方式之所以是响应式，是因为对象和函数都属于引用数据类型，实际上传的是引用地址过去，所以当引用数据类型中的数据发生了改变，子组件接收的数据也会发生改变；以上的方式，当父组件的number值发生改变后，子组件中接收的number并不会发生变化，也就是不是响应式的；
Vue2：使用provide和inject时，无法获取到实时更新的数据
大香蕉的博客
11-15 4570
组合无疑是很方便的一种做法了，但如此只是注入的初始值，并不能随时拿到数据源的实时更新。多个子组件或孙子级组件都要使用顶级或父级的数据。provide 和 inject。（即：祖先向下传递数据）、
provide与inject 数据更改
weixin_42497127的博客
02-20 2251
provide与inject方法传值.
组件之间的传值——provide和inject
m0_59345890的博客
09-08 1196
在需要获取数据的组件内直接用inject注入到当前组件中，不管你处于那一层都能够获取到，inject属性的值为一个字符串数组，或一个对象，对象的情况可具体查看官方API。组件之间的多层传值我们前面学习过了通过$attrs和$listeners，今天我们来学习一个更为简单的方法利用组件对象的属性provide和inject,它们与data、methods这些属于同级。但是它有一个缺点就是数据不是响应式的，如我在爷爷组件方法内修改提供的值，但是子组件中获取的值不会改变。父亲组件：可以被注入提供的数据。
vue2中provide/inject的使用和响应式传值
热门推荐
Min_Fox的博客
03-11 1万+
文章目录前言一、基本用法二、响应式1.方法一：传递的参数用一个方法返回2.方法二：把需要传递的参数定义成一个对象总结 前言 官网概念：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。 一、基本用法 在父组件中使用provide传值，在子组件中用inject接收。 // 父组件 data() { return { name: "卷儿" } }, provide: function() { return {
vue中provide和inject 传值不会动态更新
07-15
在Vue中，provide和inject是一对用于在父组件和子组件之间进行数据传递的选项。它们的主要作用是在父组件中定义数据，并在子组件中使用这些数据。 但是需要注意的是，provide和inject的传值是不会动态更新的。这意味着如果提供的值在父组件中发生变化，子组件中使用该值的地方不会自动更新。 这是因为provide和inject的设计初衷是为了提供一种稳定的数据传递方式，而不是用于实现响应式更新。如果需要实现动态更新，你可以使用Vue的响应式数据或者事件来完成。 例如，你可以在父组件中使用data或computed属性来定义响应式数据，并通过props将其传递给子组件。这样，当父组件中的数据发生变化时，子组件会自动更新。 另外，你也可以使用事件来实现动态更新。父组件可以通过$emit触发一个自定义事件，并将需要传递的数据作为参数传递给子组件。子组件可以通过监听这个事件来获取最新的数据，并进行相应的更新操作。 综上所述，provide和inject适用于一些静态的数据传递场景，如果需要实现动态更新，可以考虑使用Vue的响应式数据或事件机制来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值