Vue 事件总线 and 消息订阅与发布

目录

事件总线

概念

基本使用

安装事件总线

使用事件总线

实例

消息订阅与发布

概念

基本使用

安装并引入包

消息订阅

总结

---

事件总线

概念

一种组件之间的通信方式，适用于任意组件之间通信

基本使用

安装事件总线

//安装位置是 main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  //在生命周期的beforeCreate时候创造
  beforeCreate() { 
    Vue.prototype.$bus=this
  }
}).$mount('#app')

使用事件总线

接收数据：A组件想接收数据，在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

      methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.$bus.$on('事件名称',this.demo)
      },
      beforeDestroy() {
        this.$bus.$off('事件名称')
      },

提供数据：

    this.$bus.$emit('xxxx',数据)

实例

使用事件总线向怕person传递SchoolName，这里省略了安装事件总线。

person 组件：接收数据

<template>
  ...
</template>

<script>
export default {
  data() {...},
  methods: {
  getSchool(name) {
      console.log("我是person，我通过总线的方式得到学习姓名", name);
    },
},
  mounted() {
    this.$bus.$on("getSchoolName", this.getSchool);
  },
  beforeDestroy() {
    this.$bus.$off("getSchoolName");
  },
};
</script>

School组件：

<template>
  ...
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: "涉外hhhhhhh",
      address: "重庆",
    };
  },
  components: {...},
  methods: {...},
  mounted() {
    this.$bus.$emit("getSchoolName", this.name);
  },
};
</script>

效果实现：

消息订阅与发布

概念

一种组件之间的通信方式，适用于任意组件之间通信

基本使用

安装并引入包

终端安装：npm i pubsub-js   
引入：import pubsub from 'pubsub-js

消息订阅

A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

School组件：接收数据

<template>
 ....
</template>

<script>

import pubsub from "pubsub-js";

export default {
  name: "School",
  data() {...},
  methods: {
    getPerson(mesName, hobby) {
      console.log("我是school组件");
      console.log(mesName, hobby);
      巨坑！第一个参数是名字不是传递的参数！
    },
  },
  mounted() {
    this.perpubId = pubsub.subscribe("getPer", this.getPerson); //订阅消息
  },
  beforeDestroy() {
    pubsub.unsubsrcibe(pubId);
  },
};
</script>

 person组件：传递数据

<template>
   <button @click="sendhobby">点我传输韩梅梅的兴趣爱好</button>
</template>

<script>
import pubsub from "pubsub-js";
export default {
  data() {
    return {
      message: {
        name: "韩梅梅",
        age: 18,
        address: "中国",
      },
      hobby: ["看书", " 吃饭", "敲代码"],
    };
  },
  methods: {
    sendhobby() {
      pubsub.publish("getPer", this.hobby);
    },
  },
};
</script>

 效果实现：

总结

  因为Vue自身带有事件总线，所以消息订阅用的并不太多。事件在vue中还是非常重要的！