vue项目中，组件间传值的问题总结：

父传子

父组件

<template>
 <div>
  父组件
  <child :child="test"></child>
 </div>
</template>
 
<script>
 import child from './child'
 export default {
  data: () => ({
   test: ''
  }),
  components: {
   child
  },
  created () {
  },
  mounted () {
   // setTimeout模拟异步数据
   setTimeout(() => {
    this.test= 'test data'
    console.log('parent finish')
   }, 2000)
  }
 }
</script>

子组件

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

上面父组件和子组件之间的传值是模拟接口请求数据，然后传值到子组件之后，created获取不到值
解决办法是：使用v-if可以解决报错问题，和created为空问题

父组件

<template>
 <div>
  父组件
  <child :child="test" v-if="flag"></child>
 </div>
</template>
 
<script>
 import child from './child'
 export default {
  data: () => ({
   test: '',
   flag: false
  }),
  components: {
   child
  },
  created () {
  },
  mounted () {
   // setTimeout模拟异步数据
   setTimeout(() => {
    this.test= 'test data'
    this.flag = true       //  这里赋值之后设置flag为true，然后子组件进行v-if判断
    console.log('parent finish')
   }, 2000)
  }
 }
</script>

子组件 不变

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

这样就可以解决父传子组件间的传值为空问题