Vue provide inject 实现响应式

最新推荐文章于 2024-08-16 20:11:04 发布
最新推荐文章于 2024-08-16 20:11:04 发布
阅读量6.3k 收藏 2
点赞数
分类专栏： vue 文章标签： vue provide inject 响应式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Derivation/article/details/102545662
版权
本文探讨了Vue的provide/inject选项在官方文档中提到的响应式特性。虽然直接传递的数据不是响应式的，但若传递的是可监听的对象，其属性依然可以保持响应性。博主分享了自己尝试实现这一特性的过程。
摘要由CSDN通过智能技术生成

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

实现代码

// parent.vue
export default {
   
	provide () {
   
		return {
   
			provObj: new Vue(
最低0.47元/天 解锁文章
衍者
关注
专栏目录
inject/provide与响应式数据
riddle1981的博客
08-28 2484
provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 说人话就是如果你把对象都改了那这个改动就追踪不到了，如果你就改了个对象属性那这种响应就能追踪到。以下是具体的代码分析。 这意味着，出于某种考虑，vue故意将provide/inject设定为不可响应的。也就是说如果你的provide的数据改变，inject是不会接受到这个改变，然而如果你provide的内容是一个可响应的数据，比如一个对象引用，那么这个对象的属性是可以
VUE2中provide 和 inject用法,以及怎么做响应式数据?
weixin_44244924的博客
03-29 4913
VUE2中provide 和 inject用法,以及怎么做响应式数据
vue2父组件向子孙组件响应式传参，provide/inject响应式
最新发布
weixin_55510188的博客
08-16 515
provide和inject一起使用，实现将父组件的数据、方法提供给子孙组件使用，不论组件层次有多深。provide和inject绑定并不是可响应的。但如果你传入了一个可监听的对象，那么其对象的property还是可响应的。1、传入一个可监听的对象。2、传入函数的方式传参。
Vue中的Provide/Inject 实现响应式数据
胡聊前端的博客
03-12 1万+
Vue中， Provide/Inject实现了跨组件的通信。但可惜数据并不是响应式的（设计如此）。 提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的 以上引用自官网 可能之所以这样设计，是为了避免数据的混乱。就如同props不能被子组件直接修改一样。 从代码角度讲 data() { return { foo: 'foo', bar: 'bar' baz: {hello: '
provide 与 inject （实现数据响应）
wgs__的博客
10-16 349
vue祖辈通信provide/inject通信。基础用法，数据响应式用法，扩展用法。
vue祖孙组件通信传值 provide 与 inject 以及 数据的响应式
qq_38886284的博客
03-31 2429
通常，当我们需要从父组件向子组件传递数据时，我们使用 props。但是对于一些深度嵌套的组件，深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。provide 和 inject无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。解决了跨层级传递属性的不方便。
vue的provide/inject实现响应式数据
书读百遍，其义自见
04-18 484
父 export default { provide() { return{ templateId: this.templateIdValue } }, data() { return { templateIdValue: {value: ''} } }, mounted() { this.templateIdValue.value = this.$route.params.templateId } } 子 expo
Vue.js中provide/inject实现响应式数据更新的方法示例
10-16
原因在于`provide/inject`本身并不支持响应式，它只是简单地传递了一个引用，而不是建立了一个响应式的依赖关系。当我们尝试在父组件中直接更改提供给子孙的属性（如`this._provided.foo`），子组件并不能感知到这个...
vue 解决provide和inject响应的问题
01-21
官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 provide： Object | () => Object（一个对象...provide和inject响应的例子： 父
vue2 provide inject使用及响应式
weixin_44177413的博客
06-30 631
官方已经说明不是响应式 如果需要响应式可以像下面这样。
Vue之组件传值 provide-inject 非响应式，组件传值 provide-inject 响应式，自定义事件，动态组件，缓存组件，异步组件
chuxialia的博客
09-08 1213
Vue之组件传值 provide-inject 非响应式，组件传值 provide-inject 响应式，自定义事件，动态组件，缓存组件，异步组件
浅析provide/inject用法、响应式、全局传递
Dax1_的博客
02-08 7288
前言 Vue的父子间传值 ： props 爷孙或者更深嵌套的组件间传值： provide/inject 更复杂的结构：vuex provide/inject 提供/注入 provide 一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。 inject 一个字符串数组，或一个对象 使用场景 例如这样的层次结构 Root └─ 组件A ├
vue2中provide/inject的使用和响应式传值
Min_Fox的博客
03-11 1万+
文章目录前言一、基本用法二、响应式1.方法一：传递的参数用一个方法返回2.方法二：把需要传递的参数定义成一个对象总结 前言 官网概念：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。 一、基本用法 在父组件中使用provide传值，在子组件中用inject接收。 // 父组件 data() { return { name: "卷儿" } }, provide: function() { return {
provide/inject响应式实现
qq_38799387的博客
07-12 435
provide/inject响应式实现手撕代码
provide vue 响应式_vue新特性provide/inject深入学习
weixin_33263633的博客
12-29 714
provide/inject深入学习本文深入探究provide,inject在官网porivide, inject的介绍中, 有这样的一段话:provide和inject绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。本文将深入探究这句话的意思.父引用和子引用在无provide和inject时代, 一般通过组件中$parent(父引用)和$ch...
vue3API的provide和inject
weixin_50760181的博客
06-20 529
因为刚自己在研究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'
Vue3封装知识点（三）依赖注入：provide和inject详细介绍
热门推荐
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
09-19 2万+
在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、付费专栏及课程。

余额充值