Vue使用provide各种传值后inject获取undefined的问题及解决
更新时间：2022年08月25日 09:13:13 作者：AzeShinja
这篇文章主要介绍了Vue使用provide各种传值后inject获取undefined的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
使用provide各种传值后inject获取undefined
首先使用provide是为了方便孙子组件获取爷爷组件的数据
就比如下方想使用provide把table的refs分派给每个孙子组件
但是provide是先于mounted执行的，导致dom还没有搭建完成就发送给了子组件，所以子组件inject后值为undefined
所以我想要不给一个响应式数据，这样在爷爷组件中的mounted对其进行赋值后孙子组件也能同步更新
这样子组件就能正常获取它的值了
不知道还有没有更好的解决方法，如果有请踢我一下! o(￣▽￣)ブ
不如直接让爷爷组件传this
但是传递this后为undefined怎么办？
原来的写法：
provide: {
$examRouter: this,
},得改成函数的写法就好了:
provide() {
return {
$examRouter: this,
}
},inject接收不到provide中的值
一、question？？？
1. provide传值
这个 layoutModel 在data中默认值是1，然后通过接口请求，改变它的值
2. inject接收值
此时父组件的值为3，但是inject接收到的值为1
二、Why
因为是接口请求更新数据，但provide在初始的时候就传了一个固定的初始值下去，所以下级组件接收到的是初始值，而不是更新后的值
三、Answer
在data定义的时候采用对象的形式，这样就是传一个地址过去 而不是一个固定的值
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了搭建vue开发环境的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了Vue如何实现变量表达式选择器，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-02-02
这篇文章主要为大家详细介绍了Vue3中逻辑复用的相关知识,文中的示例代码简洁易懂,对我们深入了解Vue3有一定的帮助,需要的小伙伴可以参考下2023-12-12
很多时候我们需要从本地读取JSON文件里面的内容,这篇文章主要给大家介绍了关于vue项目如何读取本地json文件数据的相关资料,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Vue 的双向绑定原理与用法,结合实例形式总结分析了Vue 的双向绑定基本原理、功能、用法及注意事项,需要的朋友可以参考下2020-05-05
在Vuex使用dispatch和commit来调用mutations的区别详解
今天小编就为大家分享一篇在Vuex使用dispatch和commit来调用mutations的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue使用webPack打包发布后页面显示空白的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了vue如何解决循环引用组件报错的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
Element-UI表格嵌入popover遇到的问题及解决方案
在表格中我们通常需要在每一行的一些单元格中显示popover,这篇文章主要给大家介绍了关于Element-UI表格嵌入popover遇到的问题及解决方案,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Vue实现todo应用的示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-02-02
最新评论