vue篇-事件总线

1.首先在main.js里面

Vue.prototype.$bus = new Vue()

2.在GoodListItem.vue中发射

<template>
  <div class="goos-Item">
    <img :src="goodsItem.show.img" alt="" @load = 'imageLoad' />
    <div class="goods-info">
      <p>{{ goodsItem.title }}</p>
      <span class="price">{{ goodsItem.price }}</span>
      <span class="collect">{{ goodsItem.cfav }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    goodsItem: Object,
    default() {
      return {};
    },
  },
  methods: {
    imageLoad() {
      // console.log('imageLoad');
      // 默认情况下$bus 是undefined 在main里面给$bus赋值为实例
      //监听图片加载完之后
      this.$bus.$emit('itemImageLoad')
      // console.log(this.$bus);
    }
  },
};
</script>

<style scoped>

</style>

3.在home.vue里面接受

 // 3.事件总线  监听item图片加载完成
    this.$bus.$on('itemImageLoad',() => {
    //图片加载完成之后,刷新重新计算高度
      this.$refs.scroll.refresh()

    })