关于poprs传值到data里面数据一直获取不到的问题。

这个坑遇到好几次了，多次吐血。终于下定决心把他记录下来。

结论： 子组件的data里面数据是能直接被props里面的值赋值的。

父组件：

<子组件 :myProp="msg"></子组件>

<!--父组件data-->

data () {
   return {
     msg: ''
}
方法 {
  this.msg = XXXX
}
}

子组件： 这样赋值是可以的

prop:['myProp'],
data () {
   return {
     youProp: this.myProp
}
}

此时子组件的data里面是为空

问题来了，为啥会遇到这么多次data里面数据为空的状态呢？

其实就是一个props默认值的问题，如果是一个固定的属性，字符串等等，那就不需要担心获取不到值的问题。但是如果你传递的数据是需要动态变化的那么就不能获取到，因为数据渲染子组件的时候会先就进行默认的props赋值给data，当你的props数据改变的时候就不会第二次赋值了。问题就出在这里。

解决的方法也很简单，采用watch监听子组件props里面的你需要的数据就行了，当发生改变的时候然后再给data里面的数据重新赋值。

<!--子组件-->
watch: {
   myProp (newValue, oldValue) {
      this.youProp = newValue
      }
       
}