Vue.js - Calling a component's method from Vue instance

Question

I have a created a Vue instance and a global component. How can I call the component's method from my Vue instance?

In my Vue instance I did this:

methods: {
    handleTabClick: function(tab, event) {
        if (tab.name == 'log') {
            call loadLog function in log component
        }
    }
}

Then my component is defined as this:

Vue.component('jettLog', {
    props: ['shop'],

    data() {
        return {
            log: [],
            logLoading : true
        }
    },

    methods: {
        loadLog: function() {
            console.log("Load");
        },
    },
});

How can I call jettLog's function loadLog from handleTabClick()?

I see different explanations and now I am wondering what's the best way to do it?

Thanks!

tony19 · Accepted Answer · 2022-07-15 22:39:10Z

2

Register a global event bus whixh is an empty vue instance like this:

Var EventBus = new Vue();

in your vue instance emit an event with EventVus.$emit()

methods: {
    handleTabClick: function(tab, event) {
        if (tab.name == 'log') {
            EventBus.$emit('log-event')
        }
    }
}

$emit() takes two arguments: 1: event name 2. event data (optional)

In the created hook of jettLog component set up an event listener on the EventBus and perform your logic when a paticular event is emitted

Vue.component('jettLog', {
    props: ['shop'],

    data() {
        return {
            log: [],
            logLoading : true
        }
    },
    created(){
        var self = this;
        EventBus.$on('log-event', function(eventData){
            self.loadLog();
        });
    },
    methods: {
        loadLog: function() {
            console.log("Load");
        },
    },
});

Check this out for more info

edited Jul 15, 2022 at 22:39

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 26, 2017 at 10:05

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Torben Over a year ago

Perfect example. Thanks!

Collectives™ on Stack Overflow

Vue.js - Calling a component's method from Vue instance

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related