Блог

Главная - Вопросы по программированию - Как прослушать значение EventBus в vue js

Как прослушать значение EventBus в vue js

#vue.js #vuejs2 #event-bus

#vue.js #vuejs2 #event-bus

Вопрос:

Я пытаюсь получить значение для ввода при поиске, но это не удается.

Здесь я отправляю значения по шине событий:

 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);
        });
    }
}

EventBus

 import Vue from 'vue' 

const eventBus = new Vue(); 

export default eventBus;

Но я получаю эту ошибку:

[Предупреждение Vue]: Ошибка в созданном перехватчике: «Ошибка типа: _services_EventBus__WEBPACK_IMPORTED_MODULE_4___default.a.$on не является функцией»

Комментарии:

1. Возможно, проблема с разрешением пути import eventBus from "./services/eventBus" .

2. Не могли бы вы поделиться своим кодом EventBus?

3. @Hammerbot import Vue from 'vue' const eventBus = new Vue(); export default eventBus;

4. @jom правильные пути

5. Возможно, вам следует использовать import eventBus from "../../../services/eventBus"; в вашем компоненте listener. Можете ли вы запустить console.log(eventBus) в своем компоненте listener?

Ответ №1:

ну, я не знаю точной причины, но если вы выполняете одиночный импорт в своем eventBus.js ошибка исчезнет, что я пытаюсь сказать, сделайте это в вашем eventBus.js

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