vue异步数据 报错_VUE 异步数据传递给 component props 的问题
案例一
父组件parent.vue
// asyncData为异步获取的数据，想传递给子组件使用
父组件
import child from './child'
export default {
data: () => ({
asyncData: ''
}),
components: {
child
},
created () {
},
mounted () {
// setTimeout模拟异步数据
setTimeout(() => {
this.asyncData = 'async data'
console.log('parent finish')
}, 2000)
}
}
子组件child.vue
子组件{{childData}}
export default {
props: ['childData'],
data: () => ({
}),
created () {
console.log(this.childData) // 空值
},
methods: {
}
}
上面按照这里的解析，子组件的html中的{{childData}}的值会随着父组件的值而改变，但是created里面的却不会发生改变(生命周期问题)
案例二
parent.vue
父组件
import child from './child'
export default {
data: () => ({
asyncObject: ''
}),
components: {
child
},
created () {
},
mounted () {
// setTimeout模拟异步数据
setTimeout(() => {
this.asyncObject = {'items': [1, 2, 3]}
console.log('parent finish')
}, 2000)
}
}
child.vue
子组件
{{childObject.items[0]}}
export default {
props: ['childObject'],
data: () => ({
}),
created () {
console.log(this.childObject) // 空值
},
methods: {
}
}
created里面的却不会发生改变， 子组件的html中的{{{childObject.items[0]}}的值虽然会随着父组件的值而改变，但是过程中会报错
// 首先传过来的是空，然后在异步刷新值，也开始时候childObject.items[0]等同于''.item[0]这样的操作，
所以就会报下面的错
vue.esm.js?8910:434 [Vue warn]: Error in render function:
"TypeError: Cannot read property '0' of undefined"
针对二的解决方法：
1、使用v-if可以解决报错问题，和created为空问题
// parent.vue
父组件
import child from './child'
export default {
data: () => ({
asyncObject: '',
flag: false
}),
components: {
child
},
created () {
},
mounted () {
// setTimeout模拟异步数据
setTimeout(() => {
this.asyncObject = {'items': [1, 2, 3]}
this.flag = true
console.log('parent finish')
}, 2000)
}
}
//child.vue
子组件//不报错
{{childObject.items[0]}}
export default {
props: ['childObject'],
data: () => ({
}),
created () {
console.log(this.childObject)// Object {items: [1,2,3]}
},
methods: {
}
}
2、子组件使用watch来监听父组件改变的prop，使用methods来代替created
子组件
{{test}}
export default {
props: ['childObject'],
data: () => ({
test: ''
}),
watch: {
'childObject.items': function (n, o) {
this.test = n[0]
this.updata()
}
},
methods: {
updata () { // 既然created只会执行一次，但是又想监听改变的值做其他事情的话，只能搬到这里咯
console.log(this.test)// 1
}
}
}
3、子组件watch computed data 相结合，有点麻烦
子组件
{{test}}
export default {
props: ['childObject'],
data: () => ({
test: ''
}),
watch: {
'childObject.items': function (n, o) {
this._test = n[0]
}
},
computed: {
_test: {
set (value) {
this.update()
this.test = value
},
get () {
return this.test
}
}
},
methods: {
update () {
console.log(this.childObject) // {items: [1,2,3]}
}
}
}
4、使用emit，on，bus相结合
子组件
{{test}}
export default {
props: ['childObject'],
data: () => ({
test: ''
}),
created () {
// 绑定
this.$bus.on('triggerChild', (parmas) => {
this.test = parmas.items[0] // 1
this.updata()
})
},
methods: {
updata () {
console.log(this.test) // 1
}
}
}
这里使用了bus这个库，parent.vue和child.vue必须公用一个事件总线(也就是要引入同一个js，这个js定义了一个类似let bus = new Vue()的东西供这两个组件连接)，才能相互触发
5、使用prop default来解决{{childObject.items[0]}}
父组件
import child from './child'
export default {
data: () => ({
asyncObject: undefined // 这里使用null反而报0的错
}),
components: {
child
},
created () {
},
mounted () {
// setTimeout模拟异步数据
setTimeout(() => {
this.asyncObject = {'items': [1, 2, 3]}
console.log('parent finish')
}, 2000)
}
}
子组件
{{childObject.items[0]}}
export default {
props: {
childObject: {
type: Object,
default () {
return {
items: ''
}
}
}
},
data: () => ({
}),
created () {
console.log(this.childObject) // {item: ''}
}
}
vue异步数据 报错_VUE 异步数据传递给 component props 的问题相关推荐
- vue异步数据 报错_vue中异步请求数据，异步请求还没完成，文件就执行了就会报错，怎么解决？...
vue中,axios异步加载数据,但是有的文件里面需要用到异步拿到的数据,数据还没拿到,文件已经执行了,这时候数据就是空,就会报错,这个问题怎么解决? 具体表现: 我这边vue项目是进入页面的时候会调 ...
- vue add element报错_Vue 源码解析 -- new Vue -gt; mountComponent 001
这一系列文章的学习出处于Vue.js 技术揭秘 | Vue.js 技术揭秘,有兴趣的伙伴自行阅览 本文涉及到vue源码文件中的 src/core/instance/index.js ==> ne ...
- vue 打包路由报错_Vue下路由History模式打包后页面空白的解决方法
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往 ...
- vue中打包报错Multiple chunks emit assets to the same filename static/js/chunk-6c337256.33476c81.js
引了几个bpmn的包,导致Jenkins部署报错,找原因一直以为是引入的包有问题,后来发现是在打包的过程中会对生成的文件切割导致文件名重复了,在vue.config.js中配置以下配置完美解决,之前我 ...
- 使用np.load()加载数据 报错 Object arrays cannot be loaded when allow_pickle=False
使用np.load()加载数据 报错 Object arrays cannot be loaded when allow_pickle=False https://blog.csdn.net/weix ...
- vue解决启动报错cjs loader.js Error: Cannot find module ‘../config‘问题
vue解决启动报错cjs loader.js Error: Cannot find module '../config'问题 参考文章: (1)vue解决启动报错cjs loader.js Error ...
- vue启动项目报错：npm ERR! missing script: serve解决方法
vue启动项目报错:npm ERR! missing script: serve解决方法 1.vue启动项目报错:npm ERR! missing script: serve 问题原因: 在配置文件中 ...
- vue 兼容IE报错解决方案
vue 兼容IE报错解决方案 参考文章: (1)vue 兼容IE报错解决方案 (2)https://www.cnblogs.com/candymanping/p/10195377.html 备忘一下.
- 解决vue项目格式报错问题_@jie
vue项目格式报错问题: 简述问题:写项目过程中格式一直报错,如下图: 第一步:在项目根目录下创建名为vue.config.js文件,如下图: 第二步:js文件中的内容,如下图: 代码如下: modu ...
最新文章
- Android ContentProvider和getContentResolver
- 08-Windows Server 2012 R2 会话远程桌面-标准部署-使用PowerShell进行部署2-1
- 第三次学JAVA再学不好就吃翔(part42)--内部类概述
- 微软高管解读财报：努力创新云基础架构
- LeetCode 6039. K 次增加后的最大乘积（优先队列）
- 2017.9.5.1.语文
- 静能沉淀浮躁，过滤浅薄，调节精神。 静能解读生命的安宁，拥有了然于心的平静。...
- css3获取当前时间并显示,实时获取当前时间并展示在页面上
- atitit.团队建设--要不要招技术储备人才的问题
- 用极大似然法估计因子载荷矩阵_spss教程：因子分析
- 光子晶体和深度学习结合进行多相流检测
- android开发学习：打电话和发短信
- 「python自学建议贴」Python学习路线+视频教程完整版
- 书到用时方恨少？ 整理了一份初中、高中数学教材pdf 百度云
- html中蝴蝶飞飞怎么制作,【幼儿园折纸蝴蝶教案】手工折纸蝴蝶教案_幼儿园手工蝴蝶教案_亲亲宝贝网...
- 了解多层交换中的CEF FIB CAM TCAM
- wsl2下安装lammps
- 跨境电商亚马逊运用淘宝无货源店群模式？三点不可为
- Matlab进行彩色图像直方图匹配（不用histeq函数）
- （二 以及全部） 蓝眼睛ServiceMix教程 第一版
热门文章
- c++删除数组中重复元素_在VBA中如何使用动态数组，以及利用动态数组去除重复值的方法...
- fpga多摩川编码器开源代码_F28379D之CLB解码多摩川编码器1——入手小知识（原创）...
- 零基础适合学python吗-零基础适合学Python吗？小白能否学会Python？
- python自动化办公演示视频-2020年最新Python自动化办公视频教程（2020/9/3）
- python入门教程(非常详细)-python初学者怎么入门：python入门教程非常详细
- HTML5语音识别（已被抛弃）
- python导入模块中的对象_详解Python项目开发时自定义模块中对象的导入和使用
- python怎么将json文件转为xls文件_基于python实现把json数据转换成Excel表格
- logisim输出变成红色的e_新款E刚出就被骂最丑，却销量可观，梅赛德斯：都是小事儿，上AMG...
- vue router.beforeEach跳转路由验证用户登录状态