一、问题描述
父组件传递给子组件值，子组件使用插值表达式可以渲染，放在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.父子组件的生命周期顺序
https://www.cnblogs.com/status404/p/8733629.html
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
三、解决方案
- 使用v-if可以解决报错问题，和created为空问题
- 使用watch监听数值改变之后再使用，子组件使用watch来监听父组件改变的prop，使用methods来代替created
- …
使用v-if的方法可以自行尝试，这里我使用第二种watch监听的方法
