博客

vue 父组件异步请求数据给子组件

看代码和注释直接百分百搞懂 子组件是怎么获取父组件异步请求数据的

//父组件
//给子组件传 异步请求的数据
 <Swiper :banner="banner"></Swiper>

export default {  
  components: {
    Swiper
  },
  data() {
    return {
      banner: [],
      recommend: []
    };
  },
  methods: {
     // 异步请求数据
    async getHomeMultidata() {
    //$http 是我自己封装的 axios
      await this.$http
        .request({
          method: "get",
          url: "/home", //请求地址
          data: {}
        })
        .then(res => {
          this.banner = res.data.data.banner.list;
          // console.log(this.banner);
        });
    }
  },
  mounted() {
    this.getHomeMultidata();
  }

//子组件
//如果banners为空则不显示
<div v-if="banners">...</div>

export default {
  //父组件传值的数据
  props: ["banner"],
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      banners: [],
    };
  },
  // 监听事件，
  watch: {
    banner: function(newData, oldData) {
      //如果banner 获取值了就将数据赋给 子组件的 banners
      this.banners = newData;
    }
  }
};