代码理解props是异步的，并提出解决方案

父传子时，props的传值过程是异步的。如果需要获取同步之后的最新的props数据，可使用$nextTick()或者setTimeout（）

// 父组件代码
<template>
  <div>
    父组件：{{num}}
    <Son ref='refSon' :num='num' />
    <button @click='changeNum'>changeNum</button>
  </div>
</template>
 
<script>
import Son from './Son.vue'
export default{
 components:{Son},
 data(){
   return { num : 1}
  },
  methods:{
  changeNum(){
   this.num = 2  
   console.log(this.num) // 2
   (由于props传递是异步的,所以这里传递过来的子组件的值是1)
   console.log(this.$refs.refSon) // 1
  }
  }
}
</script>
 
 
// 子组件代码
<template>
   <div>
    子组件收到的数据是{{ num }}
   <div>
<template>
 
<script>
export default {
 props:{num : { type : Numnber , required  : true }}
}
</script>

解决方案：利用setTimeout或者$nextTick()，$nextTick()比setTimeout执行的时间要短一点

<script>
export default{
methods:{
  changeNum(){
    this.num=2
    // 方法一：
    setTimeout(){
    console.log(this.$refs.refSon.num) // 2
    }
    }
    // 方法二：
    this.$nextTick(()=>{
    console.log(this.$refs.refSon.num)
   })
}
}
 
</script>