Как прослушать значение eventBus в vue js
Я пытаюсь получить значение ввода поиска, но это не удается.
Здесь я отправляю значения по шине событий:
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.info(data);
});
}
}
СобытиеАвтобус
import Vue from 'vue'
const eventBus = new Vue();
export default eventBus;
Но я получаю эту ошибку:
[Vue warn]: Error in created hook: "TypeError: _services_eventBus__WEBPACK_IMPORTED_MODULE_4___default.a.$on is not a function"
Не могли бы вы поделиться своим кодом EventBus?
@Хаммербот import Vue from 'vue' const eventBus = new Vue(); export default eventBus;
@jom пути правильные
Возможно, вам следует использовать import eventBus from "../../../services/eventBus"; в компоненте слушателя. Можете ли вы запустить console.info(eventBus) в своем компоненте слушателя?
@sedatsevgili эти два компонента находятся не в одной папке
хорошо, каков результат console.info(eventBus) в вашем компоненте слушателя?
@sedatsevgili пустой объект ``` Объект прото: конструктор: ƒ Object() hasOwnProperty: ƒ hasOwnProperty() isPrototypeOf: ƒ isPrototypeOf() propertyIsEnumerable: ƒ propertyIsEnumerable() toLocaleString: ƒ toLocaleString() toString: ƒ toString() valueOf: ƒ valueOf() определитьGetter: ƒ определитьGetter__() __defineSetter: ƒ определитьSetter__() __lookupGetter: ƒ lookupGetter__() __lookupSetter: ƒ lookupSetter__() получить __proto: ƒ proto__() установить __proto: ƒ __proto__() ```
Используете ли вы однофайловые компоненты?
@Taylor есть два компонента
Вы пытались привязать поиск к компоненту, которому вы пытаетесь его отправить?
Ответы 1
хорошо, я не знаю точную причину, но если вы сделаете одиночный импорт в своем eventBus.js, ошибка исчезнет, что я пытаюсь сказать, сделайте это в своем eventBus.js
import Vue from 'vue'
export default new Vue();
Возможно, проблема с разрешением пути
import eventBus from "./services/eventBus".