Vue2.0父子元件以及非父子元件之間的通信

1.父元件傳遞資料給子元件

父元件資料如何傳遞給子元件呢？可以通過props屬性來實作

父元件：

<parent>
    <child :child-msg="msg"></child>//這裡必須要用 - 代替駝峰
</parent>

data(){
    return {
        msg: [,,]
    };
}
           

子元件: （通過props屬性來接收資料）

方式1：

方式2：

props: {
    childMsg: Array //這樣可以指定傳入的類型，如果類型不對，會警告
}
           

方式3：

props: {
    childMsg: {
        type: Array,
        default: [,,] //這樣可以指定預設的值
    }
}
           

這樣呢，就實作了父元件向子元件傳遞資料。

2.子元件與父元件通信

如果子元件想要傳遞資料給父元件，這在vue中是不允許的，因為vue隻允許單向資料傳遞，這時候我們可以通過觸發事件來通知父元件改變資料，進而達到改變子元件資料的目的.

子元件:

<template>
    <input v-model='inputmsg' />
</template>

watch: {
    inputmsg：function(){
        this.$emit('parentFun',this.inputmsg); 
        //一旦inputmsg改變就會觸發父元件的parentFun方法，input的值為向父元件傳遞的資料
    }
}
           

父元件:

<parent>
    <child @parentFun="change"></child>  <!--監聽子元件觸發的parentFun事件,然後調用change方法-->
</parent>
methods: {
    change(msg) {
         console.log(msg);  
    }
}
           

3.非父子元件通信

如果2個元件不是父子元件那麼如何通信呢？

在vuex加入後，對元件之間的通信有了更加清晰的操作，對于中大型的項目來說，一開始就把vuex的使用計劃在内是明智的選擇。然而在一些小型的項目，就需要一個比較便捷的解決方法。那麼，eventBus的作用就展現出來了。

主要實作途徑是在要互相通信的兄弟元件之中，都引入一個新的vue執行個體，然後通過分别調用這個執行個體的事件觸發和監聽來實作通信和參數傳遞。

1.我們需要建立一個js檔案，來建立出我們的eventBus，我們把它命名為bus.js

import Vue from 'vue';  
export default new Vue();  
           

2.這樣我們就建立了一個新的vue執行個體。接下來我們在需要通信的元件中import它。

import Bus from 'common/js/bus.js';  
           

3.元件A中進行操作

methods: {  
   addCart(event) {  
       Bus.$emit('getTarget', event.target);   
   }  
}  
//這裡我們在元件A中每次執行addCart，都會在bus中觸發這個名為'getTarget'的事件，并将點選事件的event.target順着事件傳遞出去。
           

4.接着，我們要在元件B中的created()鈎子中調用bus監聽這個事件，并接收參數：

created() {  
  Bus.$on('getTarget', target => {  
     console.log(target);  
  });  
}  
//這樣，在每次元件A觸發addCart事件，就會把event.target傳遞到元件B中，并console出來。
           

是以eventBus的使用還是非常便捷的，但是如果是中大型項目，通信比較複雜，還是建議大家直接使用vuex。