Vue provide inject 实现响应式

最新推荐文章于 2024-04-11 03:03:40 发布
最新推荐文章于 2024-04-11 03:03:40 发布
阅读量6.3k 收藏 2
点赞数
分类专栏： vue 文章标签： vue provide inject 响应式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Derivation/article/details/102545662
版权

在Vue官方文档中指出了provide/inject并不是响应式的：
在这里插入图片描述
但文档同时也说了： 如果传入了可监听的对象，对象的属性还是可响应的
但在网上并没有找到比较详细的实现方法，所以只能自己尝试实现了：

实现代码

// parent.vue
export default {
   
	provide () {
   
		return {
   
			provObj: new Vue({
最低0.47元/天 解锁文章
衍者
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
inject/provide与响应式数据
riddle1981的博客
08-28 2361
provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 说人话就是如果你把对象都改了那这个改动就追踪不到了，如果你就改了个对象属性那这种响应就能追踪到。以下是具体的代码分析。 这意味着，出于某种考虑，vue故意将provide/inject设定为不可响应的。也就是说如果你的provide的数据改变，inject是不会接受到这个改变，然而如果你provide的内容是一个可响应的数据，比如一个对象引用，那么这个对象的属性是可以
Vue中的Provide/Inject 实现响应式数据
胡聊前端的博客
03-12 1万+
Vue中， Provide/Inject实现了跨组件的通信。但可惜数据并不是响应式的（设计如此）。 提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的 以上引用自官网 可能之所以这样设计，是为了避免数据的混乱。就如同props不能被子组件直接修改一样。 从代码角度讲 data() { return { foo: 'foo', bar: 'bar' baz: {hello: '
Vue中provide inject详解+数据响应式更新，字节跳动面试难吗,应该如何应对
最新发布
m0_74931199的博客
04-11 943
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等前端视频资料：一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
vue祖孙组件通信传值 provide 与 inject 以及 数据的响应式
qq_38886284的博客
03-31 2348
通常，当我们需要从父组件向子组件传递数据时，我们使用 props。但是对于一些深度嵌套的组件，深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。provide 和 inject无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。解决了跨层级传递属性的不方便。
VUE2中provide 和 inject用法,以及怎么做响应式数据?
weixin_44244924的博客
03-29 3783
VUE2中provide 和 inject用法,以及怎么做响应式数据
vue2 provide inject使用及响应式
weixin_44177413的博客
06-30 443
官方已经说明不是响应式 如果需要响应式可以像下面这样。
浅析provide/inject用法、响应式、全局传递
Dax1_的博客
02-08 7255
前言 Vue的父子间传值 ： props 爷孙或者更深嵌套的组件间传值： provide/inject 更复杂的结构：vuex provide/inject 提供/注入 provide 一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。 inject 一个字符串数组，或一个对象 使用场景 例如这样的层次结构 Root └─ 组件A ├
Vue.js中provide/inject实现响应式数据更新的方法示例
10-16
原因在于`provide/inject`本身并不支持响应式，它只是简单地传递了一个引用，而不是建立了一个响应式的依赖关系。当我们尝试在父组件中直接更改提供给子孙的属性（如`this._provided.foo`），子组件并不能感知到这个...
vue 解决provide和inject响应的问题
01-21
官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 provide： Object | () => Object（一个对象...provide和inject响应的例子： 父
Vue通过provide inject实现组件通信
10-14
需要注意的是，`provide`和`inject`的绑定是静态的，它们在编译时确定，因此不能响应式地更改。这意味着如果祖先组件的`foo`值改变，子孙组件的`this.foo`值并不会自动更新。这是设计上的有意为之，以避免不必要的...
【JavaScript源代码】vue2实现provide inject传递响应式.docx
12-29
vue2实现provide inject传递响应式 　1. vue2 中的常规写法 　// 父级组件提供 'foo'　var Provider = {　data(){　return {　foo: 'bar'　}　}　provide: {　fooProvide: this.fooFn // 传递一个引用类型函数过去　...
vue2中provide/inject的使用和响应式传值
Min_Fox的博客
03-11 1万+
文章目录前言一、基本用法二、响应式1.方法一：传递的参数用一个方法返回2.方法二：把需要传递的参数定义成一个对象总结 前言 官网概念：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。 一、基本用法 在父组件中使用provide传值，在子组件中用inject接收。 // 父组件 data() { return { name: "卷儿" } }, provide: function() { return {
provide/inject响应式实现
qq_38799387的博客
07-12 396
provide/inject响应式实现手撕代码
provide vue 响应式_vue新特性provide/inject深入学习
weixin_33263633的博客
12-29 658
provide/inject深入学习本文深入探究provide,inject在官网porivide, inject的介绍中, 有这样的一段话:provide和inject绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。本文将深入探究这句话的意思.父引用和子引用在无provide和inject时代, 一般通过组件中$parent(父引用)和$ch...
vue3API的provide和inject
weixin_50760181的博客
06-20 472
因为刚自己在研究vue3+echarts。 所以用到啦provide和inject 我看啦一下文档。 provide和inject其实是为啦解决隔代传输数据的问题 所以我将echart实例放在app组件中，通过provide引入echart实例，这样每个页面都可以访问到啦 //App.vue <script lang="ts"> import { defineComponent, provide } from 'vue' import * as echarts from 'echarts'
子孙组件响应式传参之provide/inject
weixin_42079403的博客
03-28 391
provide/inject需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。
vue2中provide/inject的使用
qq_37635012的博客
05-19 1161
官方解释：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。// 祖先组件 data() {return {obj : {name : "小明" } } } , provide : function() {return {// 传递一个对象 obj : this . obj } } , // 孙子组件 inject : [ 'obj' ] , computed : {
Vue3封装知识点（三）依赖注入：provide和inject详细介绍
热门推荐
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
09-19 1万+
在vue3中project和inject详细使用介绍，使用技巧和原理，简单易懂！
vue3 inject provide 如何实现响应式
03-29
如果你想通过 provide 和 inject 实现响应式数据的传递，可以使用 reactive 函数来创建响应式对象，然后再将其提供给子组件。 具体实现步骤如下： 1. 在父组件中使用 reactive 函数创建一个响应式对象，并将其作为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值