vue中props传值给data时-props有值但data却是空的问题

问题

设计vue组件时，常常有这样一个应用场景：父组件通过接口请求回来的数据传给子组件， 然后在子组件内部我们会用一个props来接收，并且将该props赋值给data里面的一个变量（便于我们后期对这个数据操作，如果直接修改props，vue会报错）
这样会有一个问题，就是组件接受到的props是有值的，但是赋给data里面的变量却是空的。

• 子组件

 props: {
    title: {
      type: Stinng,
      default: ''
    }, 
 },
 
 data() {
 	return {
 		myTitle: this.titile
 	}
 }

• 父组件

<template>
	// 使用子组件
	<my-component :title="myData"/>
</template>

data() {
 	return {
 		myData: null
 	}
},
created() {
	this.myData = fetchData() // 模拟请求后端的方法
}

这个时候在子组件中你会看到 title 是有值的，但是 myTitle 却是 null。
其实就是因为我们传给子组件的数据是异步获取的，而把props赋值给data是子组件初始化时执行的，子组件初始化的时候父组件的数据还没请求回来，所以props拿到的 this.titile 是 null，（或者是初始值）。 等到异步请求的数据回来了，props就会得到更新，但组件初始化已经结束了，也就不会再次赋值给data里面的变量了。

解决办法

简单的解决办法就是在子组件中使用watch，监听对应的props，然后实时更新data里面的值

• 子组件

watch: {
	title(val){
		this.myTitle = val;
	}
}