Vue使用provide各种传值后inject获取undefined的问题

已于 2022-04-08 09:39:43 修改
阅读量6.1k 收藏 3
点赞数 4
分类专栏： Vue 文章标签： vue.js
于 2022-03-23 10:49:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AzeShinja/article/details/123680225
版权

首先使用provide是为了方便孙子组件获取爷爷组件的数据

就比如下方想使用provide把table的refs分派给每个孙子组件

在这里插入图片描述
但是provide是先于mounted执行的，导致dom还没有搭建完成就发送给了子组件，所以子组件inject后值为undefined

所以我想要不给一个响应式数据，这样在爷爷组件中的mounted对其进行赋值后孙子组件也能同步更新

在这里插入图片描述

这样子组件就能正常获取它的值了

在这里插入图片描述

不知道还有没有更好的解决方法，如果有请踢我一下! o(￣▽￣)ブ

不如直接让爷爷组件传this

但是传递this后为undefined怎么办？

原来的写法：

  provide: {
    $examRouter: this,
  },

得改成函数的写法就好了:

  provide() {
    return {
      $examRouter: this,
    }
  },
AzeShinja
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
问题：vue3中通过provide和inject传mounted中的值，无法传过去
m0_51055743的博客
06-21 1229
vue3中通过provide和inject传mounted中的值，无法传过去
深入vue3 之 provide / inject
从今年开始写写博客~~
01-20 1490
前言：本文章写的是composition api，options api的查看底部链接 应用API的 provide 作用范围：实例内的所有组件 组件上下级关系的 provide 父级组件声明的 provide，所有子孙组件皆可拿到； 声明 provide 的组件该同级和父级无法 inject 获取到 关联链上provide 声明的同名内容 采取就近原则，最近一级父级有就引用最近一级的，没有就接着往上找，直到根实例的 provide 声明 父组件： <scrip..
vue3.0 provide, inject 异步，获取不到数据问题
weixin_44067333的博客
12-01 1万+
第一次尝试使用Vue3 开发項目 使用provide, inject 实现 父子通信 但是 异步数据在子组件中 inject获取不到：如下图 1.父组件使用axios获取数据 通过provide传递数据 2.子组件使用inject接收数据 3.控制台打印发现 输出undefined 测试发现不使用axios获取数据 直接使用provide传递静态数据 子组件inject可以接收到 查找解决问题 segmentfault中Ayers用户回答了该问题解决方法： 先provide，再赋值: setup()
provide和inject获取数据为空
最新发布
weixin_47190975的博客
06-06 747
provide和inject获取数据为空
VUE3.0学习
Y4258的博客
02-02 510
vue3.0学习总结
vue中的依赖注入provide/inject遇到的一个坑
qq_40195282的博客
09-24 8316
在写vue的时候经常会遇到一种情况：可能一个参数在许多组件中会用到，或者是组件中的一个子组件需要用到父组件的父组件的某些参数。 那么这个时候为了避免组件重复传参，使用vue的依赖注入是个不错的方法，直接在最外层组件设置一个provide，内部不管多少嵌套都可以直接取到最外层的参数。但是假如我们需要的这个参数是需要请求后台接口返回或者说需要计算得来的呢，我就遇到了这么一个坑，先看代码： // 父...
浅谈vue的provide和inject使用方法及其原理
yezi__6的博客
10-27 948
首先来谈谈我们为什么要使用provide/inject呢？对于爷爷和孙子组件之间，甚至太爷爷组件与孙子组件通信我们用vuex不就ok了。 那事实的确如此，但是，请听我说但是，有时候你项目比较小甚至组件通信的场景很少的，那么你引入vuex就为了那么几个通信传参是不是很浪费啊。有人也可能会想到使用$parent获取父组件实例，来获取data/methods，这种两层就还好，那多层呢，组件嵌套很深的话，你怎么弄？写个函数把$parent再封装一下。那不是很麻烦吗，现成的你不用非要曲线救国。哈哈～扯远了。 不废话那
Vue3——第九章（依赖注入：provide、inject）
why404
01-10 5115
Vue3——第九章（依赖注入：provide、inject）
Vue3响应式provide、inject传值
明知山
12-16 4487
在父组件定义一个响应式的值 chat为要向子组件传递的值 updateChat为子组件修改chat的方法 const chat = ref(null) const updateChat = (item) => { console.log("重新拿到的值", item) chat.value = item } provide('chat', chat) provide('updateChat', updateChat) 子组件修改 const updateChat = inject('
Vue3全局组件通信之provide / inject
老电影故事的博客
03-13 4467
顾名思义，爷孙组件是比 父子组件通信 要更深层次的引用关系（也有称之为 “隔代组件”）：C组件引入到B组件里，B组件引入到A组件里渲染，此时A是C的爷爷级别（可能还有更多层级关系），如果你用 props ，只能一级一级传递下去，那就太繁琐了，因此我们需要更直接的通信方式。😜😜😜因为上下级的关系的一致性，爷孙组件通信的方案也适用于 父子组件通信 ，只需要把爷孙关系换成父子关系即可。
vue3 - 17.provide/inject依赖注入（跨级别组件传参）
qq_34111842的博客
10-23 743
在vue中，provide/inject是通过原型链实现的。作用是在根组件注册一次，在其他的子组件都可以访问到数据。
解决Vue3的undefined问题
weixin_52055811的博客
04-17 1万+
vue3的undefined问题
Vue2：使用provide和inject时，无法获取到实时更新的数据
大香蕉的博客
11-15 4549
组合无疑是很方便的一种做法了，但如此只是注入的初始值，并不能随时拿到数据源的实时更新。多个子组件或孙子级组件都要使用顶级或父级的数据。provide 和 inject。（即：祖先向下传递数据）、
vue3.0 依赖注入 provide()和inject()使用教程
郝峰vip的博客
09-23 1468
vue3.0 依赖注入 provide()和inject()的使用教程
vue中的provide和inject
热门推荐
Cassie's blog
10-11 5万+
浅析 provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。 定义说明：这对选项是一起使用的。以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。 通俗的说就是：组件得引入层次过多，我们的子孙组件想要获取祖先组件得资源，那么怎么办呢，总不能一直取父级往上吧，而且这样代码结构容易混乱。这个就是...
vue3版本provide、inject用法
weixin_46138124的博客
01-12 2万+
在父组件操作 <template> <div id="nav"> <h3>{{title}}</h3> <button @click="setTitle">同时改变title</button> </div> </template> <script> import { ref, provide } from 'vue' export default { setup() {
vue3 provide与inject的使用小技巧
weixin_44441196的博客
07-06 1844
主要使用来沟通上下文，比如父——子——子1——子2，父组件和子2组件间的通信，不使用这方法也能解决的方式还有两种 props $emit 一层一层的传 弊端：写着太麻烦 vuex 用多了性能就不太行了 进入正题 官方文档上只提供了传递值的方式，没有提供子组件去跨级改父级组件的值，但是可以换一种写法就可以了，直接代码 代码结构： 父组件——child组件——son组件 父组件 <template> <div class="text">盒子 {{ref2.name}}<.
Uncaught TypeError: Cannot destructure property ‘dialog‘ of ‘require(...).remote‘ as it is undefined
qq_41685731的博客
03-25 4872
解决 Uncaught TypeError: Cannot destructure property ‘dialog’ of ‘require(…).remote’ as it is undefined. 从v9版本开始，remote除非将设置enableRemoteModule为true，否则不允许在渲染器上使用。 const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload:
vue3 script setup 中 provide inject 写法
04-01
在 Vue3 的 script setup 中，可以通过 provide 和 inject 来实现组件之间的数据传递。 provide 和 inject 的写法如下： ```vue <script setup> import { provide, inject } from 'vue' const foo = 'hello world' provide('foo', foo) const bar = inject('foo') </script> ``` 在上面的例子中，我们使用 provide 来提供一个名为 'foo' 的变量，值为 'hello world'。然后使用 inject 来获取 'foo' 的值，将其赋值给变量 'bar'。 需要注意的是，provide 和 inject 的第一个参数必须是字符串类型，用于标识提供的变量或方法的名称。在使用 inject 获取值时，如果提供的名称不存在，会返回 undefined。 另外，provide 和 inject 还支持使用一个对象来提供或获取多个变量或方法。具体写法如下： ```vue <script setup> import { provide, inject } from 'vue' const config = { foo: 'hello world', bar: () => console.log('hello') } provide('config', config) const { foo, bar } = inject('config') </script> ``` 在上面的例子中，我们将多个变量或方法放在一个名为 'config' 的对象中，然后使用对象解构语法来获取这些变量或方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值