VueJS: Call method from component using eventbus

Question

I'm using VueJS and want to trigger a method inside a .Vue component. The eventbus is working properly. I have created this according this article: https://alligator.io/vuejs/global-event-bus/

Within the eventbus function I want to call the method from the component. How can I do this? I tried this.doSearch(), but this doesn't work. Any advises?

//Event listener
EventBus.$on('i-got-searched', search => {
    if (!(search === undefined || search === null)) {
        console.log(`Debug: ${search}`)
    }
});

//Component
export default {
    methods: {
        doSearch(input) {
            console.log(input);
        }
    }
}

Eric G Eric G · Accepted Answer · 2018-01-03T20:18:27

Using Vue's ref directive should work for you:

<search-comp ref="search"></search-comp>

And then in your eventbus use:

var search = parent.$refs.search;
search.doSearch(val);

Here is a working demo: https://codepen.io/egerrard/pen/vpJdQJ

And here is the documentation: https://vuejs.org/v2/api/#ref

VueJS: Call method from component using eventbus

1 Answers