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.js前后端数据交互之提交数据操作,结合实例形式较为详细的分析了vue.js前后端数据交互相关的表单结构、约束规则、数据提交等相关操作技巧与注意事项,需要的朋友可以参考下2018-04-04
这篇文章主要给大家介绍了关于前端vue3中的ref与reactive用法及区别的相关资料,关于ref及reactive的用法,还是要在开发中多多使用,遇到响应式失效问题,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了vue2项目实现自定义右键菜单,可添加图标、事件等方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了vue项目中页面底部出现白边及空白区域错误的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
在vue项目中采用动态添加路由的方式,第一次进入页面会正常显示,但是点击刷新页面后会导致页面空白,所以下面这篇文章主要给大家介绍了关于vue3动态路由刷新后空白或者404问题的解决方法,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了vue中template模板编译的过程全面剖析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
这篇文章主要介绍了vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
ue-bus 提供了一个全局事件中心，并将其注入每一个组件，你可以像使用内置事件流一样方便的使用全局事件。这篇文章给大家介绍了vue bus全局事件中心简单Demo，需要的朋友参考下吧2018-02-02
这篇文章主要介绍了element-ui table表格底部合计自定义配置过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue 使用rules对表单字段进行校验的步骤，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
最新评论