Vue事件车，非父子组件通讯$bus,$event,中央事件总线

Posted 2021-09-24 前端老实人

一般项目不大就利用事件车，公共的Vue实例进行传递数据

一共有两种写事件车的方式，下面一一介绍

•    利用$emit发射自定义事件和 $on监听自定义事件
•    $off销毁事件

一、第一种方式 （创建公共文件）

src文件夹下建立公共文件

// 建立公共的js文件（事件车），主要用来传递信息
// 引入vue.js
import Vue from 'vue';
// 创建空的vue实例
var event = new Vue();

export default event;

home.vue文件

<template>
  <div id="home">
    <h2>这是首页</h2>
    <h3>{{list}}</h3>
    <h5>{{mymsg}}</h5>

    <button @click="biu">发射</button>
  </div>
</template>
<script>
// 在需要传递信息的地方引入
import bus from '../eventBus.js'
export default{
  data(){
    return{
      list:['少欲音','正太音','大叔音'],
      mymsg:''
    }
  },
  methods: {
    biu(){
      // 发射一个自定义事件，用来传递信息
      console.log(bus);
      bus.$emit('biulist',this.list)
    }
  },
  mounted() {// 组件挂载时触发的钩子函数
    // 接收信息
    bus.$on('msg',val =>{
      this.mymsg = val
    })
  },
}
</script>

prodct.vue与首页毫无关联的页面

<template>
  <div id="product">
    <h2>这是商品页</h2>
    <ul v-for="val in item">
      <li>{{val}}</li>
    </ul>

    <button @click="fn">点击发射</button>
  </div>
</template>

<script>
// 在需要传递数据的地方引入
import bus from '../eventBus.js'
export default{
  data() {
    return {
       item:null
    }
  },
  methods: {
    fn(){
       bus.$emit('msg','这是商品页传来的数据')
    }
  },
  mounted() {
    // 接收信息
    bus.$on('biulist',val =>{
      this.item = val
    })
  },
  
}
</script>

二、第二种方式直接挂载到原型

在main.js中定义一个新的对象并挂载到vue原型上

Vue.prototype.$bus=new Vue();

home页

 methods: {
    msg() {
      //$emit发送数据携带数据
      this.$bus.$emit("A", {
        name: "张三",
        age: 20
      });
    }
}

prodct.vue与首页毫无关联的页面 

mounted() {
//$on监听接收数据，这里注意一般写在mounted，计算属性里
    this.$bus.$on("A", function(res) {
      console.log(res);
    });
  }

两种方式任选其一哦！小编公_号❤前端老实人，可以一起聊天交流学习哦！