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

测试环境：vue v2.3.3， vue v2.3.1

案例一

父组件parent.vue

// asyncData为异步获取的数据，想传递给子组件使用<template> <div>  父组件  <child :child-data="asyncData"></child> </div></template><script> import child from './child' export default {  data: () => ({   asyncData: ''  }),  components: {   child  },  created () {  },  mounted () {   // setTimeout模拟异步数据   setTimeout(() => {    this.asyncData = 'async data'    console.log('parent finish')   }, 2000)  } }</script>

子组件child.vue

<template> <div>  子组件{{childData}} </div></template><script> export default {  props: ['childData'],  data: () => ({  }),  created () {   console.log(this.childData) // 空值  },  methods: {  } }</script>

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

案例二

parent.vue

<template> <div>  父组件  <child :child-object="asyncObject"></child> </div></template><script> 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)  } }</script>

child.vue

<template> <div>  子组件<!--这里很常见的一个问题，就是{{childObject}}可以获取且没有报错，但是{{childObject.items[0]}}不行，往往有个疑问为什么前面获取到值，后面获取不到呢？-->  <p>{{childObject.items[0]}}</p> </div></template><script> export default {  props: ['childObject'],  data: () => ({  }),  created () {   console.log(this.childObject) // 空值  },  methods: {  } }</script>

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"

针对二的解决方法：

使用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>