1. In vue, parent component passes data to child component via props

<child-component :prop1="Data 1 of parent component" :prop2="Data 2 of parent component"></child-component>

The subcomponent accepts only props defined in the subcomponent.

Vue.component('child-component', {
  props: ['prop1', 'prop2'], // Define which props to receive
  template: '<div>{{prop1 + prop2}}</div>',
  ...
}

2. Parent component calls child component properties or methods
First give the component a name by ref on the root element, for example:

<child-component ref="aName"></child-component>

The parent component can then get the component object by that name and call the properties and methods inside:

var comp = this.$refs.name;
name.attr;
name.method();

Parent components get all direct child components through $children, excluding grandchild components; order is not guaranteed, not responsive

3. Subcomponents Pass Data to Parent Components--Custom Events
Parent components listen for events triggered by child components where they are used by v-on:

<div id="counter-event-example">
  <p>{{ total }}</p>
//Increment is an event in a subcomponent, meaning that when increment is executed in a subcomponent, the incrementTotal method in the parent component is executed
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function (arg) {
      this.total += 1
    }
  }
})

Then use $emit() in the subcomponents to actively throw events:

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
       //Pass-through parameters
       //this.$emit('increment',arg) 
    }
  },
})

Of course, if you want to use native events on the component root element, you can use the.Native modifier
In addition, $parent or $root can be used for child component invocation of parent component events, as detailed in the vue documentation;

4. Communication between sibling components

The communication network between the brothers in vue is mostly said to use vuex, but for white, there is still a threshold for the initial understanding of vuex, so here is mainly an event bus explanation.

Typically, vue development is modular, so when communication between sibling components is involved, we can declare a global event bus (i.e., a global instance of vue for supply) in the entry file beforehand and transmit data through it.

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import FastClick from 'fastclick';
import router from './router';
import Vue_resource from 'vue-resource';
import axios from 'axios';
import './common/style/index.less';
Vue.config.productionTip = false;
FastClick.attach(document.body);
Vue.prototype.$http = axios;
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    render: h => h(App),
    data: {
        eventHub: new Vue()
    }
});
router.push('/goods');

The instance can then be used globally for data transfer as follows:

//Trigger event add in component a and pass parameter 1
this.$root.eventHub.$emit('add',1);
//Listen for event triggers in component b and process parameters
this.$root.eventHub.$on('add',function(data) {
  //...
})