vue 父組件異步請求數據給子組件

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);
        });
    }
  },
  created() {
    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;
    }
  }
};