vue2组件间异步传参

场景： 父组件通过异步请求， 获取到结果后给props赋值（获取结果：object），子组件通过监听props值的变化， 进行渲染， 设置监听首次渲染触发，
 

问题： 当父组件有结果后， 子组件就是不渲染， 父组件数据变了，子组件监听也不触发

排查得到的结果：如果父组件异步结果更新后，子组件无法监听到 props 的变化，可能是由于 Vue.js 的响应式系统的限制导致的。Vue.js 在检测到 props 发生变化时，并不总是能够自动触发子组件的重新渲染，特别是在 props 是对象或数组时。

解决1： 在父组件中使用 v-if 来确保在异步结果返回后才渲染子组件。这样可以确保子组件在接收到完整的 props 数据后再进行渲染。

<template>
  <div>
    <child-component v-if="asyncData" :data="asyncData"></child-component>
  </div>
</template>

<script>
import axios from 'axios';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      asyncData: null
    };
  },
  mounted() {
    // 异步加载数据
    axios.get('your-api-url')
      .then(response => {
        this.asyncData = response.data;
      })
      .catch(error => {
        console.error('Error fetching data: ', error);
      });
  }
};
</script>

解决2： deep: true // 深度监听props对象的变化（这个方案没试，可以的话给留言）

<script>
export default {
  props: ['data'],
  watch: {
    // 深度监听props变化
    data: {
      handler(newValue) {
        // 当props发生变化时执行相关操作，例如重新渲染子组件
        // 注意：在这里你可以执行其他你想要的操作，而不一定非要重新渲染子组件
      },
      immediate: true, // 确保在初始化时也触发监听器
      deep: true // 深度监听props对象的变化
    }
  }
};
</script>

。