本文在具體實現上，主要是基於vue2.0並使用vue-cli腳手架搭建的一個基本專案，至於vue-cli這個腳手架，如果不懂也沒關係，可以先用 ￣□￣｜｜，主要介紹的是元件之間的通訊。

0、前置

首先，肯定要有安裝node和vue-cli了，具體怎麼安裝就不介紹了。

然後，建立一個初始化的專案vue_demo_2： vue init webpack vue_demo

生成的專案結構如下：

專案結構介紹：

| - build （執行資料夾，dev/prod執行時需要用到的相關檔案，含webpack配置）
| - config （配置資料夾，比如說dev/prod兩種對應的不同介面等設定）
 

| - dist （打包生成的部署資料夾，一開始沒有的，跑命令npm run build之後可見！！！）
| - node_modules （一些安裝的依賴模組）
| - src （專案程式碼）
  | - assets （資原始檔夾，為了區分static，這裡存自己的資源）
  | - components （頁面資料夾，用來存放一些元件）
  | - router （路由資料夾）
  | - App.vue （vue主檔案）
  | - main.js （入口檔案，webpack配置的entrance）
| - static （資原始檔夾，為了區分assets，這裡存第三方的資源）
| - .babelrc （轉碼規則配置）
 

| - .editorconfig （程式碼規範配置）
| - .eslintignore （eslint檢查忽略配置）
| - .eslintrc.js （eslint配置檔案）
| - .gitignore （git忽略配置）
| - .postcssrc.js （postcss的load的config，檔案裡有對應的github地址）
| - index.html （html主頁面）
| - package.json （專案的一些基本介紹，比如專案的描述、用到哪些模組等）
| - README.md

接下來，就可以正常實現不同元件之間的資料傳遞了，即元件之間的通訊。

1、父元件向子元件傳遞資料

將App.vue這個元件中刪除原來模板中的東西只保留基本的框架，當前App.vue檔案內容如下：

<template>
  <div id="app">

  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style></style>

在src/components資料夾下，新建一個Child.vue單檔案元件，建立props用於接收資料，幷包含一個message屬性，內容結構如下：

<template>
  <div class="child">
      <h2>我是子元件</h2>
      <p>這是我從父元件接收到的資料: {{cMessage}}</p>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props:["cMessage"]
}
</script>

<style>
  .child{
    border:1px solid blue;
    width: 50%;
  }
</style>

在App.vue元件，相當於是父元件中，引入子元件檔案，並呼叫該子元件，然後將資料傳遞給子元件，修改後App.vue程式碼如下：

<template>
  <div id="app">
    <h1>我是父元件</h1>
    <child cMessage="hello child"></child> <!-- 呼叫子元件， 注意cMessage這個屬性名稱是由子元件中props定義 -->
  </div>
</template>

<script>
import Child from './components/Child.vue' // 引入子元件檔案
export default {
  name: 'App',
  components:{
    Child // 宣告子元件
  }
}
</script>

<style>
#app{
  width: 60%;
  border: 1px solid red;
}
</style>

npm run dev 在瀏覽器開啟之後我們可以看到，父元件已經把資料傳遞給子元件了。

這是父元件向子元件傳遞的靜態資料，當動態傳遞資料時，需要用到v-bind繫結資料，修改App.vue檔案程式碼如下：

<template>
  <div id="app">
    <h1>我是父元件</h1>
    <!-- <child cMessage="hello child"></child> 呼叫子元件 -->
    <child v-bind:cMessage="pMessage"></child> <!-- 動態繫結父元件資料 ,cMessage還是子元件中props中的屬性,pMessage是父元件的資料 -->
  </div>
</template>

<script>
import Child from './components/Child.vue' // 引入子元件檔案
export default {
  name: 'App',
  components:{
    Child // 宣告子元件
  },
  data(){
    return {
      pMessage:'hello child , 這是動態資料'
    }
  }
}
</script>

<style>
#app{
  width: 60%;
  border: 1px solid red;
}
</style>

結果如下：

以上就完全實現了父元件向子元件的通訊了，總結：

第一步： 子元件在props中建立屬性，用於接收父元件傳遞來的資料；

第二步：父元件先引入子元件檔案，宣告子元件，然後呼叫子元件，並在呼叫的子元件時，引用子元件props中宣告的屬性，將父元件資料賦值給該屬性，就實現了父向子元件的資料傳遞，動態資料則是通過v-bind繫結父元件資料。

2、子元件向父元件傳遞資料

接著，繼續實現子元件向父元件通訊，修改Child.vue子元件檔案，新增一個button 並給該按鈕綁定了一個點選事件，在該點選事件方法中使用$emit()方法將資料傳遞給父元件，具體程式碼內容如下：

<template>
  <div class="child">
      <h2>我是子元件</h2>
      <p>這是我從父元件接收到的資料: {{cMessage}}</p>
      <button v-on:click="sendMessage">傳資料給父元件</button>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props:["cMessage"],
  methods:{
    sendMessage(){
      // 第一個引數：子元件觸發的一個自定義事件, 第二個引數：子元件要向父元件傳遞的資料
      this.$emit('childEvent','hello parent , 這是從子元件傳來的資料');
    }
  }
}
</script>

<style>
  .child{
    border:1px solid blue;
    width: 50%;
  }
</style>

在App.vue這個父元件檔案中，同樣呼叫子元件，同時利用v-on監聽子元件自定義的事件，並繫結自己本身實現的方法，具體程式碼修改內容如下：

<template>
  <div id="app">
    <h1>我是父元件</h1>
    <!-- <child message="hello child"></child> 呼叫子元件 -->
    <!-- <child v-bind:cMessage="pMessage"></child> 動態繫結父元件資料 -->
    <p>這是我從子元件接收到的資料：{{fromChild}}</p>
    <!-- 父元件觸發的childEvent是子元件中方法sendMessage中$emit()的第一個引數自定義的事件名稱，showMessage是父元件methods中的方法 -->
    <child v-bind:cMessage="pMessage" v-on:childEvent="showMessage"></child> 
  </div>
</template>

<script>
import Child from './components/Child' // 引入子元件檔案
export default {
  name: 'App',
  components:{
    Child // 宣告子元件
  },
  data(){
    return {
      pMessage:'hello child , 這是動態資料',
      fromChild:''
    }
  },
  methods:{
    showMessage(data){
      this.fromChild = data;
    }
  }
}
</script>

<style>
#app{
  width: 60%;
  border: 1px solid red;
}
</style>

在瀏覽器中，點選資料傳遞按鈕，可以看到：

這樣，也實現了子元件向父元件的資料傳遞，總結：

第一步： 子元件需要用$emit()觸發一個自定義事件，事件名稱即第一個引數名稱，並將要傳給父元件的資料作為$emit()的第二個引數。

第二步： 父元件同樣需要引用子元件檔案，宣告子元件，然後呼叫子元件，在呼叫子元件時需要用v-on監聽子元件中自定義的事件，繫結自身的方法，而該方法的引數就是子元件傳遞過來給父元件的資料。

3、元件之間的資料傳遞

在vue中，很多的一種情況就是元件之間並沒有父子關係，就是很普通的兩個元件，那麼這種平級元件之間的通訊是怎麼的，在理解父子元件之間通訊的基礎上，我們接下來繼續介紹它們的實現。

在src/assets檔案加下，新建一個mEvent.js檔案，該js檔案程式碼如下：

import Vue from 'vue'

export default new Vue

可以看到mEvent.js裡面放的是一個空的Vue例項物件，事實上，通過父子元件之間相互通訊父元件向子元件傳遞資料是藉助porps，子元件向父元件通訊則是藉助$emit()，可以發現都需要一箇中介，而平級元件之間的通訊則是可以通過這個mEvent.js作為中介來實現。

在src/componets資料夾下新建3個單檔案元件：FirstComponent.vue，SecondComponent.vue，ThirdComponent.vue，並在在App.vue這個元件中引用，此時App.vue中的程式碼為：

<template>
  <div id="app">
    <first-component></first-component>   <!-- 呼叫元件 -->
    <second-component></second-component>
    <third-component></third-component>
  </div>
</template>

<script>
import FirstComponent from './components/FirstComponent' // 引入單檔案元件
import SecondComponent from './components/SecondComponent'
import ThirdComponent from './components/ThirdComponent'

export default{
  name:'App',
  components:{
    FirstComponent, // 宣告元件
    SecondComponent,
    ThirdComponent
  }
}
</script>

<style>
#app{
  width: 80%;
  border: 1px solid black;
}
</style>

在第1個元件中，將資料傳遞給第3個元件，FirstComponent.vue具體程式碼如下：

<template>
    <div class="firstComponent">
        <h2>我是第1個元件</h2>
        <button v-on:click="oneSendToThird">向元件3傳遞資料</button>
    </div>
</template>

<script>
import mEvent from '../assets/mEvent.js' // 引入做問中介的單一事件
export default{
    name:'FirstComponent',
    methods:{
        oneSendToThird(){
            mEvent.$emit('firstComponentMessage','hello,這是來自第1個元件的資料');
        }
    }
}
</script>

<style>
.firstComponent{
    width: 60%;
    border: 1px solid red;
}
</style>

同樣，在第2個元件中也將資料傳遞給第3個元件，SecondComponent.vue具體實現如下：

<template>
    <div class="secondComponent">
        <h2>我是第2個元件</h2>
        <button v-on:click="twoSendToThird">向元件3傳遞資料</button>
    </div>
</template>

<script>
import mEvent from '../assets/mEvent.js' // 引入做問中介的單一事件
export default{
    name:'SecondComponent',
    methods:{
        twoSendToThird(){
            mEvent.$emit('secondComponentMessage','hi,這是來自第2個元件的資料');
        }
    }
}
</script>

<style>
.secondComponent{
    width: 60%;
    border: 1px solid green;
}
</style>

此時，第3個元件要接收來自第1和第2個元件傳遞過來的資料，ThirdComponent.vue具體實現如下：

<template>
    <div class="thirdComponent">
        <h2>我是第3個元件</h2>
        <p>這是從第1個元件發過來的資料：{{msg1}}</p>
        <p>這是從第2個元件發過來的資料：{{msg2}}</p>
    </div>
</template>

<script>
import mEvent from '../assets/mEvent.js' // 引入做問中介的單一事件
export default{
    name:'ThirdComponent',
    data(){
        return{
            msg1:'',
            msg2:''
        }
    },
    mounted() {
         /*要借用es6的箭頭函式，如果不用箭頭函式
            在觸發$on()事件前先：_this=this; 然後在普通函式中將資料賦值：_this.msg = data1;
            如果事先不暫存this，則會由於this的問題無法將資料新增
        */
        mEvent.$on('firstComponentMessage', (data1)=> {
            this.msg1 = data1;  
        })
         mEvent.$on('secondComponentMessage', (data2)=> {
            this.msg2 = data2;
        })
    },
}
</script>

<style>
.thirdComponent{
    width: 60%;
    border: 1px solid green;
}
</style>

那麼在瀏覽器，分別點選按鈕，可以看到資料已經傳送成功了。

從程式碼實現來看，不難發現平級元件之間資料的通訊主要通過藉助一箇中介mEvent.js，其實就是一個空的Vue例項物件，然後在利用$emit()發資料，$on()接資料，所以總結一下就是：

第一步：建立一個單一的事件中心來管理元件之間的通訊，事實上就是一箇中介；

第二步：在需要傳值的元件中$emit()觸發一個自定義事件，並傳遞引數；

第三步：在需要接收資料的元件中$on()監聽自定義事件，並在回撥函式中處理傳遞過來的引數。

至此，父子元件之間和不同元件之間的通訊就已經完全實現了。

4、非vue-cli專案中元件之間的通訊示例

其實本文主要介紹的就是利用vue-cli搭建一個初始化專案，然後實現單檔案元件之間的通訊，但是考慮到有些情況下，可能並沒有用到vue-cli，所以還是決定實現一下非單檔案元件通訊實現的寫法。

4.1 父元件向子元件傳遞資料

在電腦任意資料夾下，新建一個componet_comunication1.html，然後用在該檔案中引入vue.js（2.0版本），實現父元件向子元件傳遞資料，具體程式碼如下：

<html>
    <head>
        <meta charset="utf-8">
        <title>父元件向子元件傳遞資料</title>
    </head>

    <style>
        #app{
            width: 50%;
            border: 1px solid red;
        }
        .child{
            width: 60%;
            border:1px solid blue;
        }
    </style>

    <body>

        <div id="app">
            <h2>我是父元件</h2>
            <child :msg="message"></child>
        </div>

        <template id="child">
            <div class="child">
                <h2>我是子元件</h2>
                <p>這是父元件傳遞過來的資料：{{msg}}</p>
            </div>
        </template>

    </body>

    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> <!-- 單獨引入vue檔案 -->
    <script>
        window.onload = function () {
            new Vue({
                el:'#app',
                data:{
                    message:'hello child, 這是父元件的資料'
                },
                components:{ // 註冊一個子元件
                    'child':{
                        props:['msg'],
                        template:'#child'
                    }
                }
            })
        }
    </script>

</html>

結果展示：

由於文章前面已經具體介紹過父元件如何向子元件傳遞資料的，所以就不再相信介紹了，只給出具體的實現demo。

4.2 平級元件之間資料傳遞

那麼，平級元件之間傳遞資料componet_comunication_2.html程式碼實現如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平級元件資料通訊</title>
</head>

<body>
    <div id="box">
        <com-a></com-a>
        <com-b></com-b>
        <com-c></com-c>
    </div>
</body>

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> 
<script>
    var Event=new Vue(); //準備一個空的例項物件
    var A={ // 元件A
        template:`
            <div>
                <span>我是A元件</span> -> {{a}}
                <input type="button" value="把A資料給C" @click="send">
            </div>
        `,
        methods:{
            send(){
                Event.$emit('a-msg',this.a);
            }
        },
        data(){
            return {
                a:'我是a資料'
            }
        }
    };
    var B={ // 元件B
        template:`
            <div>
                <span>我是B元件</span> -> {{a}}
                <input type="button" value="把B資料給C" @click="send">
            </div>
        `,
        methods:{
            send(){
                Event.$emit('b-msg',this.a);
            }
        },
        data(){
            return {
                a:'我是b資料'
            }
        }
    };
    var C={ // 元件C
        template:`
            <div>
                <h3>我是C元件</h3>
                <span>接收過來的A的資料為: {{a}}</span>
                <br>
                <span>接收過來的B的資料為: {{b}}</span>
            </div>
        `,
        data(){
            return {
                a:'',
                b:''
            }
        },
        mounted(){
            Event.$on('a-msg',function(a){  //接收A元件的資料
                this.a=a;
            }.bind(this));
            Event.$on('b-msg',function(a){  //接收B元件的資料
                this.b=a;
            }.bind(this));
        }
    };
    window.onload=function(){
        new Vue({
            el:'#box',
            components:{
                'com-a':A,
                'com-b':B,
                'com-c':C
            }
        });
    };
</script>
</html>

結果展示：

好了，簡單易懂的vue元件通訊介紹就到這，後續有遇到的更多知識會慢慢補充的。如果不足或者不對的地方，歡迎各位指出~

每天總結一點點，每天進步一點點(＾－＾)V