父组件props传递数据给子组件报错

最新推荐文章于 2023-02-08 10:16:32 发布

原创最新推荐文章于 2023-02-08 10:16:32 发布 · 268 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

19 篇文章

订阅专栏

在Vue.js开发过程中，遇到父组件向子组件传递异步数据时，可能会导致子组件在初始化阶段无法获取到数据。解决办法包括：使用v-if确保数据就绪后再渲染子组件，通过watch监听props变化并在方法中处理，利用事件总线（bus）进行父子组件间通信，设置prop的默认值以避免null或undefined错误，以及使用Vuex状态管理来同步数据。这些方法有助于确保子组件正确地显示和处理来自父组件的异步数据。

父组件传递props异步数据到子组件的问题？

子组件的插值表达式中显示异步数据的某个属性值报错
created获取props的数据报错

解决办法：

父组件调用子组件中加判断v-if
在子组件中用watch监听数据，获取值在methods中定义方法在watch中调用
用bus，$emit, $o n ，在父组件中异步获取数据时$ emit传递数据，在子组件中 $on接收父组件传递的数据进行相应的显示。（parent.vue和child.vue必须公用一个事件总线（也就是要引入同一个js，这个js定义了一个类似let bus = new Vue()的东西供这两个组件连接），才能相互触发）
使用prop default来解决{{childObject.items[0]}}。子组件中接收props childObject的default中定义默认值，如：props: {
childObject: {
type: Object,
default () {
return {
items: ‘’
}
}
}
},
5.vuex，需要在子组件中引入 import { mapState, mapGetters } from ‘vuex’，computed: {
…mapGetters({
item: ‘getAsyncData’
}),
…mapState({
item0: state => state.index.asyncData
})
},