如何在 vue js 中监听 eventBus 值答案

【问题标题】：How to listen eventBus value in vue js如何在 vue js 中监听 eventBus 值
【发布时间】：2019-03-05 13:29:09
【问题描述】：

我正在尝试获取搜索输入值，但失败了。

这里我通过事件总线发送值：

import eventBus from "../../../services/eventBus";

export default {
    name: "Navbar",
    data() {
        return {
            searchInputValue: '',

        }
    },
    watch: {
        searchInputValue(val) {
            eventBus.$emit("search", val);
        }
    }
}

我在这里尝试获取值：

import eventBus from "./services/eventBus";

export default {
    data() {
        return {
            searchInputValue: null
        }
    },
    created() {
        eventBus.$on("search", data => {
            console.log(data);
        });
    }
}

事件总线

import Vue from 'vue' 

const eventBus = new Vue(); 

export default eventBus;

但我收到此错误：

[Vue 警告]：创建钩子时出错：“TypeError: _services_eventBus__WEBPACK_IMPORTED_MODULE_4___default.a.$on 不是函数”

【问题讨论】：

可能是路径解析问题import eventBus from "./services/eventBus"。
你能分享你的 EventBus 代码吗？
@Hammerbot import Vue from 'vue' const eventBus = new Vue(); export default eventBus;
@jom 路径正确
也许你应该在你的监听器组件中使用import eventBus from "../../../services/eventBus";。你能在你的监听器组件中运行console.log(eventBus) 吗？

标签： vue.js vuejs2 event-bus

【解决方案1】：

好吧，我不知道确切的原因，但如果你在 eventBus.js 中进行单一导入，错误就会消失我想说的是在你的 eventBus.js 中执行此操作

import Vue from 'vue'
export default new Vue();

【讨论】：