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

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

一般项目不大就利用事件车,公共的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与首页毫无关联的页面


1.<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与首页毫无关联的页面

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

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

相关文章
|
8天前
|
JavaScript API
vue3手写card组件
vue3手写card组件
23 2
|
1天前
|
JavaScript
在Vue中,如何使用`$once`侦听一个事件?
在Vue中,如何使用`$once`侦听一个事件?
5 1
|
1天前
|
存储 JavaScript 前端开发
在Vue中,除了`beforeDestroy`生命周期钩子函数,还有哪些方法可以在组件销毁时清理定时器?
在Vue中,除了`beforeDestroy`生命周期钩子函数,还有哪些方法可以在组件销毁时清理定时器?
6 2
|
1天前
|
存储 JavaScript
Vue中如何在组件销毁时清理定时器?
Vue中如何在组件销毁时清理定时器?
4 1
|
1天前
|
JavaScript 前端开发
Vue中如何实现组件的按需加载?
Vue中如何实现组件的按需加载?
5 1
|
1天前
|
JavaScript
vue3以指令的形式使用防抖事件
vue3以指令的形式使用防抖事件
8 2
|
1天前
|
JavaScript
Vue组件选项编写代码的特点和注意事项
Vue组件选项编写代码的特点和注意事项
10 2
|
2天前
|
JavaScript
Vue定义全局组件的三种方式
Vue定义全局组件的三种方式
10 1
|
2天前
|
API
table组件隐藏额外内容并使用Toolpit显示(vue3)
table组件隐藏额外内容并使用Toolpit显示(vue3)
|
3天前
|
JavaScript
Vue中如何实现单例模式的组件?
Vue中如何实现单例模式的组件?
8 0

相关产品

  • 云迁移中心