There are three types of communication between components: parent to child, child to parent, and brother components

Six communication modes between vue components

        1.props/$emit

                props is passed from parent to child, $emit is passed from child to parent.

Code snippet for parent to child transmission through props:         

//Parent component
new Vue({
	el:"#app ", / / loader
	data:{
		info:'ha-ha'
	},
})
//Subcomponents
Vue.component("mydiv",{
	template:`
		<div>
			{{info}}
		</div>
	`,
	props:['info'],	
})

//Corresponding code snippet in html
<div id="app"> 	<!--The label corresponding to the parent component -->
	<mydiv :info='info'></mydiv> <!--The label corresponding to the subcomponent-->
</div>

Code snippet for child to parent transmission through $emit:

//Parent component
new Vue({
	el:"#app ", / / loader
	data:{
		info:''
	},
    methods:{
        parent(data){
            this.info=data
        }
    }
})
//Subcomponents
Vue.component("mydiv",{
	template:`
		<div>
			<button @click='change'>details</button>
		</div>
	`,
    data:{
	    son:''
	},
    methods:{
        change(){
            this.$emit('son',this.son)
        }
    }
})

//Corresponding code snippet in html
<div id="app"> 	<!--The label corresponding to the parent component -->
	<mydiv :son='parent()'></mydiv> <!--The label corresponding to the subcomponent-->
</div>

        2.$emit is used in conjunction with $on to realize the transfer of parameters from sibling components

Code snippet of sibling component parameter passing implementation:

var bus=new Vue()
//Brother assembly 1
Vue.component("mydiv",{
	template:`
		<div id='div'>
			{{a}}
		</div>
	`,
    data(){
        return:{
            a:''
        }
    },
    mounted:{
        bus.$on('xiongdi',(data)=>{
            this.a=data
        })
    }
})
//Brother assembly 2
Vue.component("mydiv1",{
	template:`
        <div>
            <button @click='chang'>details</button>
		</div>
	`,
    data(){
        return:{
            info:'ha-ha'
        }
    },
    methods:{
        chang(){
            bus.$emit("xiongdi",this.info)
        }
	}
})

        3.$attrs/$listeners

        $ Attribs: contains attribute bindings (except class and style) in the parent scope that are not recognized (and obtained) as props. When a component does not declare any prop, all parent scope bindings (except class and style) will be included here, and internal components can be passed in through v-bind="$attrs" - very useful when creating high-level components.
        $ Listeners: contains v-on event listeners in the parent scope (without. native modifiers). It can pass in internal components through v-on="$listeners" - very useful when creating higher-level components.

         4.provide and inject

         provide/inject:vue2.2.0 adds an API to allow an ancestor component to inject a dependency into all its descendants, no matter how deep the component level is, and it will always take effect when the upstream and downstream relationship is established.
         To sum up: the ancestor component provides variables through the provider, and then injects variables through the inject in the descendant component.
The provide/inject API mainly solves the communication problem between cross level components. However, its use scenario is that sub components obtain the status of superior components, and a relationship between active provision and dependency injection is established between cross level components.

// A.vue
export default {
 provide: {
   name: 'nora'
 }
}
// B.vue
export default {
 inject: ['name'],
 mounted () {
   console.log(this.name);  // nora
 }
}

        5.$parent and $chidren and ref

         ref: if it is used on an ordinary DOM element, the reference refers to the DOM element; If used on a child component, the reference points to the component instance
        $ parent / $children: access parent / child instances
         It should be noted that these two methods get component instances directly. After use, you can directly call component methods or access data.
        $ Parent: access the parent instance, if any.
        $ Children: the direct child component of the current instance. Note that $children does not guarantee order and is not responsive. If you find yourself trying to use $children for data binding, consider using an Array with v-for to generate subcomponents, and using Array as the real source.

        6.vuex

         vuex is a warehouse. There are many objects in the warehouse. The data source is stored in the state. When the component wants to change the data in the state, it must be done through mutation. Mutation stores the operation method of changing the data in the state, and then triggers the method in mutation through the operation stored in actions, which is triggered by $store.dispatch('action name ', data1) in the component. Then commit() triggers the call of mutation to update the state indirectly.