您现在的位置是:网站首页> 编程资料编程资料
Vue使用provide各种传值后inject获取undefined的问题及解决_vue.js_
2023-05-24
240人已围观
简介 Vue使用provide各种传值后inject获取undefined的问题及解决_vue.js_
使用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定义的时候采用对象的形式,这样就是传一个地址过去 而不是一个固定的值

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- axios 拦截器管理类链式调用手写实现及原理剖析_JavaScript_
- JS利用循环解决的一些常见问题总结_javascript技巧_
- react-dnd实现任意拖动与互换位置_React_
- VScode中配置JavaScript编译环境的方法_javascript技巧_
- react优雅处理多条件鼠标拖拽位移_React_
- react实现拖拽模态框_React_
- React日期时间显示组件的封装方法_React_
- element ui提交表单返回成功后自动清空表单的值的实现代码_vue.js_
- 使用React组件编写温度显示器_React_
- react-three-fiber实现炫酷3D粒子效果首页_React_
