子组件使用watch动态监听父组件数据并更新

1、问题

父组件的数据变化，子组件也要跟着变化。
一般父向子传值，子组件通过props接收。比如：

父组件：传值popInfo
<shop-setting :popInfo="popInfoParent" @popClick="popClick"></shop-setting>

子组件：接收
<script type="text/ecmascript-6">
    export default {
		props:{
		       popInfo:Object,
		},
	}
</script>

但这种方法的局限性在于，只有在子组件初次加载的时候才接收值，执行之后就不会改变了。
想要实时更新就只能用watch监听。

2、使用watch实时监听父组件的数据

这里以一个对象举例：
父组件中：

//需要子组件动态监听的数据
 popInfo:{
         sTime:'',
         location:'',
 },

子组件：

<p>{{startTime}}</p>
<p>{{location}}</p>

//接收对象
props:{
            popInfo:Object,
},
computed: {
            //监听父组件的数值变化
            startTime() {
                return this.popInfo.sTime;
            },
            location(){
                return this.popInfo.location;
            }
 },
watch: {
            //时间和定位弹窗
            sTime(newValue, oldValue) {
				//进行相应操作...
                return newValue;
            },           
            location(newValue){
                console.log('new:', newValue);
                return newValue;
            }        
},

更多示例看参考博客：
Vue父组件向子组件传递一个动态的值，子组件如何保持实时更新实时更新？
vue-cli 工程中关于 $watch 监听使用，配合父子组件传值使用