#yyds干货盘点#Vue事件车，非父子组件通讯$bus,$event,中央事件总线

Posted 2021-12-09 前端老实人

一般项目不大就利用事件车，公共的Vue实例进行传递数据 一共有两种写事件车的方式，下面一一介绍

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

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

src文件夹下建立公共文件

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

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

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

Vue.prototype.$bus=new Vue()

home页

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

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

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

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