vue异步数据 报错_详解vue父组件传递props异步数据到子组件的问题

本文探讨了在Vue中如何处理父组件通过props传递异步数据给子组件时遇到的问题,包括子组件created钩子中获取不到最新值以及由此导致的渲染错误。通过案例分析了五种解决方案:1) 使用v-if;2) 子组件监听props变化并更新;3) 利用computed属性和watch结合;4) 使用事件总线;5) 设置prop的默认值。这些方法可以帮助开发者避免在处理异步数据时出现的报错和渲染问题。
摘要由CSDN通过智能技术生成

案例一

父组件parent.vue

//asyncData为异步获取的数据,想传递给子组件使用

父组件

data: ()=>({

asyncData:''}),

components: {

child

},

created () {

},

mounted () {//setTimeout模拟异步数据

setTimeout(() =>{this.asyncData = 'async data'console.log('parent finish')

},2000)

}

}

子组件child.vue

子组件{{childData}}

props: ['childData'],

data: ()=>({

}),

created () {

console.log(this.childData) //空值

},

methods: {

}

}

上面按照这里的解析,子组件的html中的{{childData}}的值会随着父组件的值而改变,但是created里面的却不会发生改变(生命周期问题)

案例二

parent.vue

父组件

data: ()=>({

asyncObject:''}),

components: {

child

},

created () {

},

mounted () {//setTimeout模拟异步数据

setTimeout(() =>{this.asyncObject = {'items': [1, 2, 3]}

console.log('parent finish')

},2000)

}

}

child.vue

子组件

{{childObject.items[0]}}

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

父组件

data: ()=>({

asyncObject:'',

flag:false}),

components: {

child

},

created () {

},

mounted () {//setTimeout模拟异步数据

setTimeout(() =>{this.asyncObject = {'items': [1, 2, 3]}this.flag = trueconsole.log('parent finish')

},2000)

}

}

//child.vue

子组件//不报错

{{childObject.items[0]}}

props: ['childObject'],

data: ()=>({

}),

created () {

console.log(this.childObject)//Object {items: [1,2,3]}

},

methods: {

}

}

2、子组件使用watch来监听父组件改变的prop,使用methods来代替created

子组件

{{test}}

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}}

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}}

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]}}

父组件

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]}}

props: {

childObject: {

type: Object,default() {return{

items:''}

}

}

},

data: ()=>({

}),

created () {

console.log(this.childObject) //{item: ''}

}

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3组件向子组件传递数据的方式与Vue 2props传递方式类似。通过在组件使用props属性来定义需要传递给子组件数据,并在子组件通过props来接收这些数据。具体步骤如下: 1. 在组件,定义需要传递给子组件数据。可以通过在子组件标签使用"v-bind"或简写的":"语法来绑定组件数据props上。例如: ```html <template> <div> <child-component :message="parentMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from parent component' }; } }; </script> ``` 2. 在子组件,通过props属性声明接收组件传递数据。可以使用props属性的数组语法来声明需要接收的props。例如: ```html <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { props: ['message'] }; </script> ``` 现在,子组件就可以通过this.message来访问传递过来的组件props数据。 需要注意的是,在Vue 3props的声明方式也可以通过对象语法来实现更多的配置选项。例如,可以为props指定类型、默认值、是否必需等信息。具体的props配置可以参考Vue官方文档。 综上所述,Vue 3组件向子组件传递数据的方式与Vue 2类似,通过在组件使用props属性定义要传递数据,并在子组件通过props属性声明接收这些数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [详解vue2组件传递props异步数据到子组件问题](https://download.csdn.net/download/weixin_38750721/12777608)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vueprops实现子组件组件一起变化](https://download.csdn.net/download/weixin_38737366/12791776)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue组件向子组件(props)传递数据的方法](https://download.csdn.net/download/weixin_38739942/13202461)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值