[Vuejs]-How to send value of variable from component one to component two? (vue.js 2)

by

2👍

✅

I’ll elaborate on what Serge referenced. In Vue v1 components could just broadcast messages to the world and others could just listen and act on them. In Vue2 it’s a bit more refined to be more explicit.

What you need to do is create a separate Vue instance as a messenger or communication bus visible to both of your existing components. Example (using ES5):

// create the messenger/bus instance in a scope visible to both components
var bus = new Vue();

// ...

// within your "result" component
bus.$emit('sort-param', 'some value');

// ...

// within your "filter" component
bus.$on('sort-param', function(sortParam) {
    // ... do something with it ...
});

For more complicated matters than simple component-to-component communication Vuex (Vue’s equivalent of React’s Redux) should be investigated.

👤Rommel Santor

Leave a comment