在传递异步数据比如说请求到的数据传入子组件时需要在子组件中通过监听获取到传入的值

直接上代码

父组件传入a(对象类型)

<template>
  <div id="login">登录页
    <card :a="a"></card>
  </div>
</template>
<script>
import Card from './components/card.vue'
export default {
  components:{Card},
  name: "login",
  data() {
    return {
      a:{}
    };
  },
  mounted(){
    this.fn()
  },
  methods: {
    fn(){
     setTimeout(()=>{
        this.a={
        name:'ydh',
        age:18
      }
      },1000)
    }
  },
};
</script>

子组件中接收a

    props:{
        a:{
            type:Object,
            default:{}
        }
    },

在mounted中观察传入的对象

   mounted(){
        console.log("挂载输出"+this.a.name) 
   },

运行结果为

在watch中通过监听的方式获取传入的对象

   watch:{
       a:function(newVal,oldVal){
           console.log("异步输出"+this.a.name)
       }

       }

运行结果为

总结:组件传递异步数据时一定要使用watch进行监听的方式在子组件中获取传入的数据