Vue解决报错4_父组件传递给子组件值，子组件使用插值表达式可以渲染，放在created函数中提示undefined

一、问题描述

父组件传递给子组件值，子组件使用插值表达式可以渲染，放在created函数中提示undefined

截图

• 父组件

• 子组件

二、原因分析

应该是 顺序的问题(生命周期的问题），在子组件created中调用getInfo()函数的时候，props还没有传值

所以出现

created里面的却不会发生改变， 子组件的html中的{{{principalID}}的值虽然会随着父组件的值而改变，但是过程中会报错:

[Vue warn]: Invalid prop: type check failed for prop "principalID". Expected String with value "undefined", got Undefined 
found in ---> <Principal> at src/views/detail-page/components/principal/index.vue

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

参考：

1.父子组件的生命周期顺序

2.父组件异步请求数据传递给子组件

https://www.jb51.net/article/117447.htm

3.Vue官方文档

https://cn.vuejs.org/v2/guide/components-props.html#%E4%BC%A0%E9%80%92%E9%9D%99%E6%80%81%E6%88%96%E5%8A%A8%E6%80%81-Prop

三、解决方案

1. 使用v-if可以解决报错问题，和created为空问题
2. 使用watch监听数值改变之后再使用，子组件使用watch来监听父组件改变的prop，使用methods来代替created
3. …

使用v-if的方法可以自行尝试，这里我使用第二种watch监听的方法