问题：props如何在请求接口后将数据传给子组件？

网络请求的数据：

子组件：

你在子组件的mounted里面并不能获取到请求后的数据，因为子组件和父组件是同时渲染的，也就是mounted方
法在父组件渲染好的同时就已经执行过了，而此时请求的数据还没有拿到。当你拿到数据的时候，并不能再次
执行mounted函数。

watch知识点：

   watch: {
            num(newVal, oldVal) {
            // 监听 num 属性的数据变化
    		// 作用 : 只要 num 的值发生变化,这个方法就会被调用
    		// 第一个参数 : 新值
    		// 第二个参数 : 旧值,之前的值
                console.log('oldVal:',oldVal)
                console.log('newVal:',newVal)
            }
        }

immediate（立即处理 进入页面就触发）

watch: {
            num: {
            	// 数据发生变化就会调用这个函数  
                handler(newVal, oldVal) {
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                // 立即处理 进入页面就触发
                immediate: true
            }
        }

deep（深度监听）

    对象和数组都是引用类型，引用类型变量存的是地址，地址没有变，所以不会触发watch。这时我们需要进行深度监听，就需要加上一个属性 deep，值为 true

watch: {
        	// 第一种方式：监听整个对象，每个属性值的变化都会执行handler
        	// 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的
            food: {
                // 每个属性值发生变化就会调用这个函数
                handler(newVal, oldVal) {
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                // 立即处理 进入页面就触发
                immediate: true,
                // 深度监听 属性的变化
                deep: true
            },
            // 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数
            // 函数执行后，获取的 newVal 值和 oldVal 值不一样
            'food.name'(newVal, oldVal) {
                console.log('oldVal:', oldVal)   // 冰激凌
                console.log('newVal:', newVal)   // 棒棒糖
            }
        }

解决方法： 不是在子组件 加watch 是在父组件加上watch 把异步请求回来最新的值赋值给 原来data中的白变量空数组

 watch: {
		           interestData(newVal, oldVal) {
		            // 监听 num 属性的数据变化
		    		// 作用 : 只要 num 的值发生变化,这个方法就会被调用
		    		// 第一个参数 : 新值
		    		// 第二个参数 : 旧值,之前的值
		                console.log('oldVal:',oldVal)
		                console.log('newVal:',newVal)
						this.interestData = newVal
		            }
		        }