vue2 中祖孙传值provide inject 如何具有响应性

最新推荐文章于 2023-06-30 18:06:41 发布
最新推荐文章于 2023-06-30 18:06:41 发布
阅读量299 收藏
点赞数
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45778558/article/details/129630275
版权

把provide透传的值 作为函数的返回值。然后在孙页面通过执行这个函数的方式拿到函数返回的结果就可以拿到最新的值。也就间接变成了响应式的了

祖先组件中的数据   

 

1.祖先组件中 （ 将孙组件需要用的值 放进函数 return出去 即将子组件需要用到的值 作为函数返回值）

 

2.子组件中

 a.使用inject将子组件需要用到的provide传过来的值 注入

 b.在模板中 采用函数调用的方法 拿到透传的值

 

 

 

流泪百香果
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 解决provide和inject响应的问题
01-21
官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 provide： Object | () => Object（一个对象或返回一个对象的函数） inject： Array | { [key: string]: string | Symbol | Object }（一个字符串数组，或一个对象，对象的 key 是本地的绑定名） 要实现父子组件响应，父组件传递的数据类型必须是对象Object，子组件接收的数据类型必须是对象Object，其他数据类型都是不好使的 provide和inject响应的例子： 父
vue父组件给子组件的组件传值provide inject的方法
10-16
在本篇文章里小编给大家整理的是一篇关于vue父组件给子组件的组件传值provide inject的方法，需要的朋友们学习下。
Vue中的Provide/Inject 实现响应式数据
liujiujiang的博客
07-01 576
介绍： provide/inject 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。 缺点： 祖先组件不需要知道哪些后代组件使用它提供的属性。 后代组件不需要知道被注入的属性来自哪里。 会将应用程序中的组件与它们当前的组织方式耦合起来，使重构变得更加困难。 所提供的属性是非响应式的。 最近在使用这个进行深层嵌套传值的时候，发现只能传固定值，传递不了响应式的数据，查官网提示得： provide 和 inject..
VUE2中provide 和 inject用法,以及怎么做响应式数据?
weixin_44244924的博客
03-29 3605
VUE2中provide 和 inject用法,以及怎么做响应式数据
vue2 provide inject使用及响应式
最新发布
weixin_44177413的博客
06-30 409
官方已经说明不是响应式 如果需要响应式可以像下面这样。
vue2中provide/inject的使用和响应式传值
热门推荐
Min_Fox的博客
03-11 1万+
文章目录前言一、基本用法二、响应式1.方法一：传递的参数用一个方法返回2.方法二：把需要传递的参数定义成一个对象总结 前言 官网概念：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。 一、基本用法 在父组件中使用provide传值，在子组件中用inject接收。 // 父组件 data() { return { name: "卷儿" } }, provide: function() { return {
Vue3、Vue2中的爷爷与祖孙之间的传值
Wancc123的博客
04-20 8647
1.父传孙数据:provide 2.子孙得到数据:inject 父传孙子 import { ref, provide } from 'vue' setup() { // 直接把数据传递出去给孙子传 provide('sendInfo', 1000) }
Vue.js中provide/inject实现响应式数据更新的方法示例
10-16
主要介绍了Vue.js中provide/inject实现响应式数据更新，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue中的provide/inject的学习使用
08-27
本篇文章主要介绍了vue中的provide/inject的学习使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue2响应式原理
qq_52845451的博客
03-25 973
Vue2响应式原理
vue祖孙组件通信传值 provide 与 inject 以及 数据的响应式
qq_38886284的博客
03-31 2310
通常，当我们需要从父组件向子组件传递数据时，我们使用 props。但是对于一些深度嵌套的组件，深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。provide 和 inject无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。解决了跨层级传递属性的不方便。
vue2 响应式原理
m0_61093181的博客
04-25 481
总体来说，Vue2的响应式原理非常深入和复杂，但它背后的思想却非常简单：通过对数据进行封装和加工，实现数据与视图之间的双向绑定，从而帮助开发者更加高效地构建前端应用程序。社区活跃：Vue2拥有一个非常活跃和热情的社区，包括官方文档、GitHub仓库、论坛、博客等多种渠道，可以方便地获得相关的技术支持和交流平台，使得开发者可以更加快速地解决问题和学习新知识。轻量级：Vue2的核心库非常轻量级，只有几十KB的大小，可以快速地下载和加载，并且对于不同的应用场景和需求，可以灵活地选择和配置所需的功能和插件。
vue2中祖父组件和孙组件事件通信
SSS0821的博客
03-17 2931
vue2祖父组件孙组件事件通信
Vue2中Provide和Inject和Vue3中Provide和Inject爷孙组件传值响应式使用方法
陈先生的博客
10-25 475
在vue项目开发时，如果遇到爷孙组件时，应该如何快速处理呢？
vue2和vue3父-子传值、孙辈传值provide/inject
Zt0118的博客
07-29 330
vue2和vue3父-子传值、孙辈传值provide/inject
provide与inject（实现祖与后代组件间通信）
qq_41429765的博客
10-11 107
作用：实现祖与后代组件间通信 套路：父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据 具体写法： 1.祖组件中 <template> <div class="home" > <div style="background: darkorange;height:100px;"> {{justN}} </div> <HelloWorld msg="Welcome t..
vue中的provide和inject
xiaomajia029的博客
10-18 626
目录 一、语法 二、使用场景 三、关于 provide/inject 的响应问题 每次看到关于vue组件传值的文章，都会讲到provide和inject这种传值方法。但是在实际的项目开发中，基本没有看到过使用这个的场景（印象中之前看iview form组件代码的时候看到过），所以这应该用于什么场景当中呢？ 一、语法 用法详见vue document - provide/inject，在...
史上最全的vue中组件之间的传值方式
weixin_44953151的博客
02-06 1683
要注意的是 provide 和 inject 传递的数据不是响应式的，也就是说用 inject 接收来数据后，provide 里的数据改变了，后代组件中的数据不会改变，除非传入的就是一个可监听的对象 所以建议还是传递一些常量或者方法。.sync可以帮我们实现父组件向子组件传递的数据的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据。和 .sync 类似，可以实现将父组件传给子组件的数据为双向绑定，子组件通过 $emit 修改父组件的数据。
浅谈vue中provide和inject 用法
weixin_34007879的博客
03-25 2188
provide：Object | () => Object inject：Array | { [key: string]: string | Symbol | Object } provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。是2.2.0版本 新增的。 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，...
vue2中provide inject vue响应式怎么修改数据
05-01
在Vue2中，我们可以使用provide和inject选项来在父组件和子组件之间共享数据。如果我们想要在子组件中修改父组件提供的数据，我们需要使用Vue2的响应式机制来确保数据变化的检测和更新。 首先，在父组件中提供数据...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值