Vue的学习Ⅸ（事件总线）

一、应用场景

二、具体使用

/*main.js文件*/
Vue.prototype.$bus = new Vue();					/*在原型上面添加Vue实例*/

/*组件2*/
<template>
  <div>
    <img src = "~assets/img/introduce.png" alt = "" @load="imgLoad">
  </div>
</template>

<script>
  export default {
    name: 'GoodsItem',
    methods: {
      imgLoad() {
        this.$bus.$emit('imgLoadFinish')						/*发出事件*/
      }
    }
  }
</script>

<style scoped lang = "scss">
</style>

/*app组件*/
<template>
  <div>
    ……
  </div>
</template>

<script>
  export default {
    name: 'App',
    mounted() {					/*在组件挂载完的时候就监听imgLoadFinish事件*/
      this.$bus.$on('imgLoadFinish', () => {
        this.$refs.scroll.scroll.refresh();
        console.log('hi');
      })
    }
</script>

<style scoped lang="scss">
</style>

要注意的是原本在Vue.prototype上面是没有$bus属性的，它是我们加上去的属性
当然这里也是可以使用vuex来达到目的的

本文只用于个人学习与记录