vuejs组件通信的eventHub(巴士）

迈不过友情╰ 2022-05-13 08:34 304阅读 0赞

**eventHub**以我理解，他有点像**vuex**

# **eventHub是什么？** #

**但是又是缩小版的，可以说是乞丐版，因为他所操作的东西并不多。**

**但是作为组件之间的通信已经足够了，因为你用vuex不得不引用vuex**

**而且你还需要做不少的配置，在大型或者中型项目处理起来十分方便。**

**但是一两个组件之间传递数据，或者组件比较少的情况下还要这样操作，需要一个备用方案。**

# **eventHub如何使用？** #

## **1.如果你是外部js 引用的话，可以这样写** ##

// event-bus.js
    // 组件通过它来通信
    var eventHub = new Vue()
    export default eventHub
    
    
    // 主页面
    
    <template>
        <div>
            <button @click="find">发送</button>
        </div>
    
    </template>
    <script>
    import Subscriber from './components/Subscriber'   //这里是假设的目录，需要自己定义
    import eventHub from './js/event-bus'              //这里是假设的目录，需要自己定义  
    export default {
       methods:{
            find(){
              eventHub.$emit('delete-todo', 'hello')
                // 第一个参数是信号的名称
                // 第二个参数是发送的参数
            }
        }
    }
    </script>
    
    
    
    
    
    // 组件1  
    // components名称：Subscriber 
    
    <template>
            
    
    
    </template>
    
    <script>
      export default {
        created(){
           eventHub.$on('delete-todo',backing )
            // 这里是接收信号
           // 第一个参数是信号名称
           // 第二个参数是回调的函数名称
        },
         methods:{
            backing(site){
             console.log(site)
            }
        }
    }
    
    </script>
    
    
    
    // 点击按钮「发送」 后
    // 打印： hello

这里是把他独立成一个js 引用，如果不想每次用的时候都在组件里面定义应该怎么做呢？

# **1.在入口文件里面引用** #

## ##

### 假设你用的是脚手架工具，引用文件名叫 main.js ###

import Vue from 'vue'
    import App from './App'
    
    
    //  全局组件之间通信
    Vue.prototype.$eventHub= Vue.prototype.$eventHub ||  new Vue()        // 巴士
    
    new Vue({
      el: '#app',
      template: '<App/>',
      components: {App},
      data: {
        eventHub: new Vue()
      }
    })

### 组件部分： ###

主页面： HelloWorld.vue

<template>
      <div class="hello">
        <h1 @click="go">传递</h1>
        <back></back>
      </div>
    </template>
    
    <script>
    import back from "@/components/Background";
    export default {
      name: "HelloWorld",
      methods: {
        go() {
          this.$eventHub.$emit("add-todo", "哈哈");
        }
      },
      components: {
        back
      }
    };
    </script>

引用组件：

<template>
        <div>
            <div>background</div>
            <div class="">
                <button @click="move">发送bb</button>
            </div>
        </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          bb: "我是订阅者"
        };
      },
      created() {
        this.$eventHub.$on("add-todo", this.move);
        // 绑定接收回调过来的事件处理 
      },
      methods: {
        move(ab) {
          console.log("发送");
          console.log(ab);
          console.log("我获取到参数");
        }
      }
    };
    </script>
    
    <style>
    </style>

最终打印：

发送
    哈哈
    我获取的参数