How to pass data between Vue components?

Question

Vue.js

app.js file:

window.Vue = require('vue');
import VueResource from 'vue-resource';
Vue.use(VueResource);
import Vuex from 'vuex';
Vue.use(Vuex);
Vue.component('comment-box', require('./components/CommentBox.vue'));
Vue.component('info-box', require('./components/InfoBox.vue'));
const app = new Vue({
    el: '#app'
});

InfoBox.vue

<template>
    <div :class="[{ isActive }, snackbars]" id="form-output-global">
        {{message}}
    </div>
</template>

How to declare globally these variables in order to change them from other components... For example, in CommentBox.vue do something like:

methods: {
            show(message){
                isActive = true,
                message = сообщение отправлено
            }
}

Answer 1

Thanks to all ! Found here https://habr.com/post/332628/ an example. What I needed!

Answer 2

Or pass it to child components through props through a unidirectional connection, and pass it to the parent through events. Or use the VueX store, and get data using getters, and change using mutations.