这个坑遇到好几次了,多次吐血。终于下定决心把他记录下来。
结论: 子组件的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
}
}