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

使用v-if解决Vue组件加载问题

最新推荐文章于 2025-07-05 13:44:41 发布

Lofty_ambition

最新推荐文章于 2025-07-05 13:44:41 发布

阅读量2.4k

点赞数

分类专栏： vue.js

vue.js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何利用Vue.js中的v-if指令解决子组件加载时的数据未准备好导致的错误及空值问题。通过一个具体示例展示了如何在父组件中使用v-if结合异步数据加载来确保子组件正确显示。

使用v-if可以解决报错问题，和created为空问题
// parent.vue
<template>
 <div>
  父组件
  <child :child-object="asyncObject" v-if="flag"></child>
 </div>
</template>
 
<script>
 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)
  }
 }
</script>

<template>
 <div>
  子组件
  <!--不报错-->
  <p>{{childObject.items[0]}}</p>
 </div>
</template>
 
<script>
 export default {
  props: ['childObject'],
  data: () => ({
  }),
  created () {
   console.log(this.childObject)// Object {items: [1,2,3]}
  },
  methods: {
  }
 }
</script>