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

Question

My view is like this :

<div class="row">
    <div class="col-md-3">
        <search-filter-view ...></search-filter-view>
    </div>
    <div class="col-md-9">
        <search-result-view ...></search-result-view>
    </div>
</div>

My search-filter-view component is like this :

<script>
    export default{
        props:[...],
        data(){
            return{
                ...
            }
        },
        methods:{
            filterBySort: function (sort){
                this.sort = sort
                ...
            }
        }
    }
</script>

My search-result-view component is like this :

<script>
    export default {
        props:[...],
        data() {
            return {
                ...
            }
        },

        methods: {
            getVueItems: function(page) {
                ...
            }
        }
    }
</script>

I want display value of sort parameter (filterBySort method, component one) to getVueItems method (component two)

How can I do it?

With the help of vuex these things can be made simple, have look at vuex.vuejs.org/en. — Gopal Sharma
– Gopal Sharma, Commented Feb 16, 2017 at 15:38
A simple case you can use a dummy vue to pass data between both as explained in the doc here: vuejs.org/v2/guide/… — Serge
– Serge, Commented Feb 16, 2017 at 15:47

Rommel Santor · Accepted Answer · 2017-02-16 16:49:37Z

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.

answered Feb 16, 2017 at 16:49

Rommel Santor

1,0117 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related