1、在vue中父组件是经由过程props通报数据给子组件

<child-component :prop1="父组件的数据1" :prop2="父组件的数据2"></child-component>

子组件只吸收在子组件中定义过的props的值，

Vue.component('child-component', {
  props: ['prop1', 'prop2'], // 定义吸收哪些 props
  template: '<div>{{prop1 + prop2}}</div>',
  ...
}

2、父组件挪用子组件属性或要领
首先在组件的根元素上经由过程ref给取个名字，比方：

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

然后父组件就能够经由过程该称号获取到这个组件对象，从而挪用内里的属性与要领：

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

父组件能够经由过程$children，获取到一切的直接子组件，不包括孙组件；不保证递次，不是相应式的

3、子组件通报数据给父组件—-自定义事宜
父组件经由过程v-on在子组件运用的处所监听子组件触发的事宜：

<div id="counter-event-example">
  <p>{{ total }}</p>
//increment是子组件中的事宜，意义就是在子组件中increment实行的时刻，实行父组件中的incrementTotal要领
  <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
    }
  }
})

然后在子组件中运用$emit()主动抛出事宜：

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')
       //通报参数
       //this.$emit('increment',arg) 
    }
  },
})

固然假如你想在组件根元素上运用原生事宜，能够运用.native修饰符
另外子组件挪用父组件事宜则能够运用$parent或许$root，详见vue文档；

4、兄弟组件之间通讯

vue中兄弟组件之间的通讯网上大部分说法都是运用vuex，然则关于小白来讲，vuex的初始明白门坎照样有的，所以这里重要用事宜巴士解说一下。

平常在vue的开辟中都是模块化开辟，所以当涉及到兄弟组件之间的通讯的时刻，我们能够在进口文件中事前声明一个全局的事宜巴士（即一个全局的供vue实例），然后经由过程他来传导数据。

// 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');

然后便能够全局的运用该实例，举行数据的传输，以下：

//在组件a中触发事宜add，而且通报参数1
this.$root.eventHub.$emit('add',1);
//在组件b中监听事宜的触发，并处置惩罚参数
this.$root.eventHub.$on('add',function(data) {
  //...
})