Vue中 事件总线（eventBus）详解及使用 和 消息订阅与发布

事件总线（eventBus）可用于任意两个组件传参

以school.vue和student.vue为例

//main.js
new Vue({
  router,
  store,
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this
  }
}).$mount('#app')

//profile.vue
<template>
  <div class="profile">
    <h1>我是profile</h1>
    <school/>
    -------------------------------------
    <student/>
  </div>
</template>

<script>
import school from '../components/school.vue'
import student from '../components/student.vue'

export default {
  components: {
    school,
    student
  },
}
</script>

//school.vue
<template>
  <div>
    <h3>学校名称：{{schoolName}}</h3>
    <h3>学校地址：{{schoolAddress}}</h3>
  </div>
</template>

<script>
export default {
    data() {
        return {
            schoolName: 'w3c',
            schoolAddress: '杭州'
        }
    },
    mounted() {
    	//必须用箭头函数
        this.$bus.$on('stuNum', (data) => {
            console.log('已获取到学号：', data);
        })
        
        // 只会触发一次
        // this.$bus.once('stuNum', (data) => {
        //     console.log('已获取到学号：', data);
        // })
    },
    beforeDestroy() {
        this.$bus.$off('stuNum')
    }
}
</script>

//student.vue
<template>
  <div>
      <h3>姓名：{{name}}</h3>
      <h3>学号：{{number}}</h3>
      <button @click="sendStuNum">将该学生的学号告诉学校</button>  
  </div>
</template>

<script>
export default {
    data() {
        return {
            name: 'tm',
            number: 100
        }
    },
    methods: {
        sendStuNum() {
            this.$bus.$emit('stuNum', this.number)
        }
    }
}
</script>

注意：在组件销毁前，要解绑自定义事件

消息订阅与发布

npm i pubsub-js

//school.vue
<template>
  <div>
    <h3>学校名称：{{schoolName}}</h3>
    <h3>学校地址：{{schoolAddress}}</h3>
  </div>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
    data() {
        return {
            schoolName: 'w3c',
            schoolAddress: '杭州'
        }
    },
    mounted() {
        this.pubid = pubsub.subscribe('stuNum', (data) => {
            console.log('已获取到学号：', data);
        })
    },
    beforeDestroy() {
        pubsub.unsubscribe(this.pubid)
    }
}
</script>

//student.vue
<template>
  <div>
      <h3>姓名：{{name}}</h3>
      <h3>学号：{{number}}</h3>
      <button @click="sendStuNum">将该学生的学号告诉学校</button>  
  </div>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
    data() {
        return {
            name: 'tm',
            number: 100
        }
    },
    methods: {
        sendStuNum() {
            pubsub.publish('stuNum', this.number)
        }
    }
}
</script>