如何将变量的值从组件一发送到组件二？ （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?

Answer 1

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.