provide，inject响应式用法

最新推荐文章于 2023-04-05 12:30:49 发布
最新推荐文章于 2023-04-05 12:30:49 发布
阅读量794 收藏 2
点赞数 2
文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47733490/article/details/123183621
版权
本文探讨了Vue中Provide/Inject的使用问题，指出在默认情况下，Inject只能获取到Provide的初始值，而非实时更新。为了解决这个问题，需要使传输过程变得响应式。通过使用箭头函数来定义Provide的值，并在Inject接收后，在计算属性中处理这个值，确保在页面渲染时能反映出Provide值的最新变化。
摘要由CSDN通过智能技术生成

正常的provide和inject的传输中，inject只能接收到第一次provide传过来的旧值，如果provide中的值改变也不能接收到新的，所以要将传输写成响应式的

首先Provide

将provide中的值用箭头函数的写法（注：provide中的值正常只接收string类型和object类型）

Inject：

↓inject接收参数↓

↓在计算属性中返回接收的参数↓

↓在页面中渲染参数用到的是计算属性中的方法名而不是inject中的参数↓

 

刘大气
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js中provide/inject实现响应式数据更新的方法示例
10-16
主要介绍了Vue.js中provide/inject实现响应式数据更新，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue 解决provide和inject响应的问题
01-21
官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 provide： Object | () => Object（一个对象...provide和inject响应的例子： 父
@Provide+@Inject组合使用
Jonn1124的博客
05-27 679
@Provide+@Inject组合使用 // 组件A export default { provide() { return { reload: this.reload; } } methods: { reload() { // 刷新页面的代码。。。 } } } // 组件BCDEFG都可以使用 export default { inject: ['rel
Inject Provide @Inject @Provide
weixin_42274805的博客
11-08 491
一、Inject与Provide 作用：父级与子孙组件传递数据 场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据 使用： // 父组件 <template> <div> <son></son> </div> </template> <script> export default { name
Provide和Inject的用法
不是程序猿呀的博客
06-13 617
provide的选项：inject的选项：代码执行顺序data->provide->created->mountedprovide 和 inject 绑定并不是可响应的。这是刻意为之的。如何变成响应式的呢，再简单改一下 拓展：你可以直接传一个this过去，这样孙子组件会获得爷爷组件的实例对象，这种方式也是响应式的...
provide和inject的用法
weixin_52148270的博客
08-31 1365
1、provide与inject的功能 通过provide与inject，可以把一个祖先组件指定的数据和方法，传递给其所有子孙组件中 provide 和 inject 主要在开发高阶插件/组件库时使用. 由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据,provide和inject是成对出现的. ##2.为什么不使用父子组件props传值呢？ 因为父子组件props传值需要需要知道往哪一个子组件传值，而
vue父组件给子组件的组件传值provide inject的方法
10-16
要注意的是，`provide` 中的值如果直接是基本类型（如数字、字符串等），那么后代组件通过 `inject` 接收后，这个值是无法响应式更新的。只有当 `provide` 的值是一个对象引用时，后代组件才能监听到这个对象的属性...
【JavaScript源代码】vue2实现provide inject传递响应式.docx
12-29
Vue.js 是一款流行的前端框架，它的核心特性之一是数据绑定和响应式系统。在 Vue 2 中，为了在组件间实现非父子组件的数据传递，官方提供了 `provide` 和 `inject` API。这两个选项允许我们创建一种跨级依赖注入，...
Vue通过provide inject实现组件通信
10-14
需要注意的是，`provide`和`inject`的绑定是静态的，它们在编译时确定，因此不能响应式地更改。这意味着如果祖先组件的`foo`值改变，子孙组件的`this.foo`值并不会自动更新。这是设计上的有意为之，以避免不必要的...
java基础五六天合：变量+方法+数组
chenxi26的博客
11-06 125
day05 变量 特点： 出现的位置不同，变量的名字，作用和使用范围都不一样 成员变量：（类里方法外）----作用范围整个类----不用初始化----有默认值 基本类型 默认值 byte 0 short 0 int 0 long 0L float 0.0f double 0.0d boolean false 局部变量：（方法里）----作用范围在方法里----需要初始化 当局部变量名和成员变量名相同时，优先使用局部变量（就近原则） 方法 1.概述 被命名的代码块
Vue中的Provide/Inject 实现响应式数据
热门推荐
胡聊前端的博客
03-12 1万+
Vue中， Provide/Inject实现了跨组件的通信。但可惜数据并不是响应式的（设计如此）。 提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的 以上引用自官网 可能之所以这样设计，是为了避免数据的混乱。就如同props不能被子组件直接修改一样。 从代码角度讲 data() { return { foo: 'foo', bar: 'bar' baz: {hello: '
provide与inject的使用
qq_38761664的博客
07-02 2187
在父组件中，在provide中提供变量name='parentData'' 在子组件中通过inject接收 d页面显示结果 如果需要出入当前组件内数据，则需要写成一下方式 需要注意的是当前传入的是对象是才能完成父子组件的值的双向绑定。展现结果 点击后变为22222 ...
provide和inject的使用方法
weixin_42382532的博客
03-04 681
provide 和 inject跨组件传值 实现跨组件传值，只能向下传值 provide：必须在分级组件进行使用，用来给下级组件注入依赖 inject：必须在子组件进行使用，用来获取父组件定义的跨组件传递的数据 //父组件定义 <template> <div id="app"> <h1>父组件</h1> <Child/> </div> </template> <script> import Chi
vue3中provide && inject的使用
lannieZ的博客
12-08 3251
与 Vue2中的 provide 和 inject 作用相同，只不过在Vue3中需要手动从 vue 中导入 这里简单说明一下这两个方法的作用： provide ：向子组件以及子孙组件传递数据。接收两个参数，第一个参数是 key，即数据的名称；第二个参数为 value，即数据的值 inject ：接收父组件或祖先组件传递过来的数据。接收一个参数 key，即父组件或祖先组件传递的数据名称 假设这有三个组件，分别是 A.vue 、B.vue 、C.vue，其中 B.vue 是 A.vue 的子组件，C.vue 是
provide/inject实现响应式数据(学习记录)
luckandluck的博客
07-29 418
响应性基础 1使用reactive import { reactive } from 'vue' // 响应式状态 const state = reactive({ count: 0 }) 这就是 Vue 响应性系统的本质。当从组件中的 data() 返回一个对象时，它在内部交由 reactive() 使其成为响应式对象 。 2 使用refs ref 会返回一个可变的响应式对象，该对象作为一个响应式的引用维护着它内部的值，这就是 ref 名称的来源。该对象只包含一个名为 valu...
provide与inject的基本使用
温壁
12-12 265
1、首先新建三个组件(parent，son，grandson) 2、parent.vue如下 <template> <div> {{msg}} <son></son> </div> </template> <script> import son from "@/components/son.vue"; export default { name:"parent"
provide (提供)/inject(注入)
2301_76440312的博客
04-05 117
provide (提供)/inject(注入)
Vue里面的provided，inject实现响应式数据探索
峰会路转的博客
06-06 761
这种传递数据的方式不是响应式的，官方文档说是可以为之，那么我们要实现响应式的传递，那该怎么处理呢？ 首先来看我们正常的使用方式: import Son from './Son' export default { provide () { return { text: this.test } }, data () { return { test: "parent-text" } .
vue学习-深层组件传递数据Provide/inject
Rulelur的博客
10-29 452
1.Provide/inject 父组件的数据可以放在provide，任意层级的子组件声明inject，便可以访问到该数据 provide: { msg: "父组件数据", }, inject: ["msg"] 值为对象的provide无法访问组件实例 property，要访问需将provide 转换为返回对象的函数，子组件部分不需要做修改。 data() { return { dataMsg: "父组件数据", }; }, pr.
vue3 provide inject 响应
最新发布
05-01
在Vue3中，provide和inject是一对新的API，用于跨层级传递数据，可以用于父组件向其所有子孙组件传递数据，而不需要一个个手动props传递。provide和inject的用法类似于Vue2中的props和$emit。 在Vue3中，provide与inject具有响应式能力，这意味着当provide向下传递的数据发生变化时，依赖这些数据的组件也会同步更新。 例如，一个父组件中定义了一个provide，如下所示： ``` const app = Vue.createApp({ data() { return { name: "Vue 3", }; }, provide() { return { appName: Vue.computed(() => { return this.name; }), }; }, }); ``` 在子组件中，可以使用inject来访问provide提供的数据，如下所示： ``` const Child = { inject: ["appName"], template: ` <div> <p>App Name: {{appName}}</p> </div> `, }; ``` 当name值发生变化时，appName也会同步更新。这种响应式机制使得provide和inject的使用更加灵活和方便，也更加符合Vue的响应式编程思想。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值