vue組件之間通訊實錄

一、在vue中父組件是經過props傳遞數據給子組件

<child-component :prop1="父組件的數據1" :prop2="父組件的數據2"></child-component>

子組件只接受在子組件中定義過的props的值，

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

二、父組件調用子組件屬性或方法
首先在組件的根元素上經過ref給取個名字，例如：

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

而後父組件就能夠經過該名稱獲取到這個組件對象，從而調用裏面的屬性與方法：

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

父組件能夠經過$children，獲取到全部的直接子組件，不包括孫組件；不保證順序，不是響應式的

三、子組件傳遞數據給父組件----自定義事件
父組件經過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文檔；

四、兄弟組件之間通訊

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) {
  //...
})