コンポーネント通信
vue自体のコンポーネント通信

親=>子:親コンポーネントから子コンポーネントへの参照または呼び出し方法

子=>親:子コンポーネントから親コンポーネントへの参照または呼び出し方法

兄弟間:兄弟コンポーネント間の参照または呼び出し方法

親子通信

パラメータ-props

考え方:サブコンポーネントのプロパティ(カスタム)を定義し、親コンポーネントをサブコンポーネントに割り当てます.

呼び出し方法(1)-$refs

考え方:サブコンポーネントのプロパティを定義します-ref=「a」、親コンポーネントは次のとおりです.this.$refs.a. ();

呼び出し方法(2)-children

考え方:親コンポーネントのパス:this.$children[0]. ();子と親の通信

呼び出し方法(1)-$parent.$emit(" ");

構想:親コンポーネントはコンポーネントのライフサイクル(mounted)で$onでイベントを定義し、サブコンポーネントはthis.$parent.$emit(" ");

呼び出し方法(2)-$emit(" ");

考え方:親コンポーネントはサブコンポーネントを呼び出すときにv-onでイベントをサブコンポーネントに渡し、サブコンポーネントはthis.$emit(" ")親コンポーネントから送信されたイベントを呼び出す

    
   -{{this.text}}
    
    


    var vm = new Vue({
        el:"#app",
        data:{
            text:''
        },
        methods:{
            changeText(_text){
                this.text = _text;
            }
        },
        components:{
            'child':{
                template:'<p><label>   </label><input type="text" v-on:input="change" /></p>',
                methods:{
                    change(event){
                        this.$emit('parentEvent',event.target.value);
                    }
                }
            }
        }
    });

呼び出し方法(3)-parent

考え方:親コンポーネントはサブコンポーネントを呼び出すときにv-onでイベントをサブコンポーネントに渡し、サブコンポーネントはthis.$parent.

    
   -{{this.text}}
    


    var vm = new Vue({
        el:"#app",
        data:{
            text:''
        },
        methods:{
            changeText(_text){
                this.text = _text;
            }
        },
        components:{
            'child':{
                template:'<p><label>   </label><input type="text" v-on:input="change" /></p>',
                methods:{
                    change(event){
                        this.$parent.changeText(event.target.value);
                    }
                }
            }
        }
    });

兄弟間の通信
上記の親子間通信と同様に、サブコンポーネント間で共通の親コンポーネントがあるため、兄弟コンポーネント間の通信は、子1が親に、そして親2が兄弟間のコンポーネントの通信になります.
Vuex-状態管理通信
コンポーネント間通信の実装

は、1つのコンポーネントをパッケージするために用いる.js

ユニット.js

//     ：state
const state = {
    count = 0;
}
//     ：mutaions
const mutaions = {
    increment(_state){
        _state.count += 1;
    }
}
//     
const actions = {
    increment(_content){
        _content.commit('increment');
    }
}
//   
export default{
    state,
    mutaions,
    actions
}

集合インスタンス化store.js

import Vue from 'Vue';
import Vuex from 'vuex';
//     .js
import transition from './transion.js';
//      
const store = new Vue.Store({
    modules:{
        transition
    }
});
//     
export default store;

主入口app.jsインスタンス化vuexオブジェクト

//   vuex  
import store from './vuex/store.js';
//    vuex  
new Vue({
    el:"#app",
    router,
    store,
    render:h=>h(app)
});

各コンポーネント間呼び出し

1.呼び出しパラメータ

$store.state.   .  

2.呼び出し方法

$store.dispatch('   ');