前言：第一次分享學習過程中的一些感悟與體會，不喜勿噴；VUE是一個漸進式的框架，便於前端專案的開發，第一次接觸VUE的時候，發現這個東西很神奇。所有的頁面均為元件化，對於頁面上重複出現的部分我們可以抽取出來作為一個單獨的元件，每次引用的時候均會有元件之間的通訊。下面，我就把我在學習過程中的收穫記錄下來：

一、元件之間的通訊

通訊方式分為傳值和傳引用兩種方式：

傳值：String ，Number ,  Boolean;

傳引用：Array ,  Object

注：傳引用的時候，一個地方的資料變化，其餘地方引用的資料也會跟著變化。

二、父元件向子元件傳值

在父元件中，需要註冊子元件並引用子元件，這裡演示兩種，傳值和傳引用。在子元件中需要通過props屬性來接收父元件傳遞的值。具體程式碼示例如下：

<template>
<div>
    <!-- 這裡是父元件 -->
    <Test :intems="intems" :title="title"></Test>
</div>
</template>
<script>
import Test from './Test'
export default{
    data(){
        return{
            title:'傳遞的是一個值，(number,string,boolean)',
            intems:
            [
              {name:'小白兔',sex:"女",age:"18",school:"-------大學"},
              {name:'小白兔',sex:"男",age:"23",school:"-------大學"},
              {name:'小白兔',sex:"女",age:"12",school:"-------大學"},
              {name:'小白兔',sex:"女",age:"26",school:"-------大學"},
              {name:'小白兔',sex:"男",age:"20",school:"-------大學"},
            ]
        }
    }，
    components:{
        Test
    }
}    
</script>
 

<!-- 這裡是Test子元件 -->
<template>
    <div>
        <!-- 這裡直接使用父元件傳遞過來的引用 -->
        <table>
            <tbody>
                <tr v-for="intem in intems" :key="intem.id">
                     <td>{{intem.name}}</td>
                     <td>{{intem.sex}}</td>
                     <td>{{intem.age}}</td>
                     <td>{{intem.school}}</td>
                </tr>
            </tbody>
      </table>
      <!-- 這裡直接使用父元件傳遞過來的值 -->
      <h1>{{title}}</h1>
    </div>
<template>
<script>
export default{
    data(){
        return{
            //props:["intems"],//兩種接收父元件值得方法，第二種比較嚴謹
              props:{
                intems:{
                  type:Array,
                  required:true
                },
                title:{
                  type:String
                }
              }
        }
    }
}
</script>
<style></style>
 

三、子元件向父元件傳值

在子元件中向父元件傳值，需要觸發或是監聽到值變化向父元件進行傳遞。具體程式碼如下：

<template>
    <div>
        <!-- 這裡是子元件Test，演示向父元件傳值 -->
        <button v-on:click="Msg">子元件傳值到父元件</button>
    </div>
</template>
<script>
export default{
     methods:{
        //子元件向父元件事件傳值
        Msg:function(){
          //第一個引數是自定義的事件名，第二是內容
          this.$emit("msgChanged","子向父元件傳值");
        }
    }
}
</script>

<template>
    <div>
        <!-- 這裡是父元件 -->
        <Test v-on:msgChanged="updataMsg($event)"></Test>
        <!-- 顯示子元件傳遞的引數值 -->
        <h>{{msgZXC}}</h>
    </div>
</template>
<script>
import Test from './Test'
export default{
    data(){
        msgZXC : '等待接收子元件傳遞的引數值'
    },
    methods:{
        updataMsg(msgZXCChanged){
          this.msgZXC = msgZXCChanged;
        }
    },
    components:{
        Test
    }
}
</script>

三、兄弟元件之間的通訊

兄弟元件為同一個父元件當中的兩個子元件之間的通訊。這裡不再做程式碼展示，應用場景個人覺得相對沒有前兩種多，兄弟元件之間的通訊可以使用watch（監聽）來進行實現，通過中轉變數。