Как передавать данные между компонентами Vue?

Question

[Виталий]

Файл app.js :

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>

Как объявить глобально эти переменные что бы менять их из других компонентов... Например в CommentBox.vue сделать что то типо:

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

Answer 1

[Виталий]

Всем спасибо ! Нашёл вот тут https://habr.com/post/332628/ пример. То что мне надо было!

Answer 2

[Rasul Turganov]

Либо через однонаправленную связь передавать дочерним компонентам через props, и через события передовать родителю. Либо использовать VueX store, и получать данные c помощью getters, а изменять с помощью mutations.