Vue組件通信問題

子組件給父組件通信

如果子組件想要改變數據呢？這在vue中是不允許的，因爲vue只允許單向數據傳遞，這時候我們可以通過觸發事件來通知父組件改變數據，從而達到改變子組件數據的目的

子組件：

<template>
  <div @click='upData'></div>  
</template>

<script type="text/javascript">
  export default {
    data () {
      return {
        msg: 'Hello'
      }
    }    
    methods: {
      upData () {
        this.$emit('childData', this.msg) //this.msg傳遞的數據
      }
    }
  }
</script>

<style type="text/css">
</style>

通過綁定事件upData,在裏面使用$emit事件來註冊childData事件,並且傳遞數值this.msg到父組件中
父組件：

<template>
  <child @upData='changData' :msg='msg'></child>  //監聽子組件觸發的事件,然後調用change方法
</template>

<script type="text/javascript">
  export default {
    data () {
      return {
        msg: ''
      }
    }    
    methods: {
      changData (msg) {
        this.msg = msg
      }
    }
  }
</script>

<style type="text/css">
</style>

父組件通過監聽子組件的childData的事件,來觸發自己的綁定的changData事件,並將值獲取複製給自己的msg
到這裏就完成了子組件給父組件傳遞數據的過程

子組件給父組件通信

父組件數據如何傳遞給子組件呢？可以通過props屬性來實現

例子如下
父組件：

<template>
  <parent>
    <child :child-msg='msg'></child> //注意其中childmsg需分開寫出來child-msg
  </parent>    
</template>

<script type="text/javascript">
  export default {
    data () {
      return {
        msg: 'Hello'    //定一個傳遞的變量msg
      }
    }    
  }
</script>

<style type="text/css">    
</style>

子組件通過props來接收數據:
方式1：

props: ['childMsg']

此處的props中的數值，需要與父組件中使用子組件：child-msg一致,
否則,傳遞不成功

方式2 :

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

檢測props中傳遞的值的類型,不對則會提示警告

方式3：

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

在props中你可對接收的數值，進行驗證,同樣也可以設置默認值,
以方便數據的的準確性,這樣呢，就實現了父組件向子組件傳遞數據.

非父子組件之間的通信

如果不是父子組件需要通信,那將怎樣實現呢?
首先我們需要創建一個事件中心,通過事件中心來接收或者傳遞事件,作爲一箇中轉站

1.創建事件中心

let eventControl = new Vue();

2.組件1觸發事件

<template>
  <div @pubEvent="changeData"></div>  //監聽組件觸發的事件,然後調用changeData方法
</template>

<script type="text/javascript">
  export default {
    data () {
      return {
      }
    }    
    methods: {
      changData () {
        eventControl.$emit('changTo', 'msg') //觸發事件中心,以及需要傳遞的事件
      }
    }
  }
</script>

<style type="text/css">
</style>

此時此刻已完成需要的事件的添加到了中轉站,觸發事件已經完成

3.組件2接收觸發事件

<template>
  <div></div>
</template>

<script type="text/javascript">
  export default {
    data () {
      return {
        msg: ''
      }
    }    
    create () {
      eventControl.$on('changTo', () => {
        this.msg = msg                     //接收觸發事件中心 
      }) 
    }
  }
</script>

<style type="text/css">
</style>

此時此刻已完成接收事件的監聽在中轉站,接收事件已經完成,當觸發事件被點擊的,則中轉站中的接收事件
會監聽到,從而完成費父子組件間的通信,進行傳遞msg信息

4.自定義事件傳遞信息這裏不做闡述,方法會較爲複雜,需要了解的可以觀看官方Api,謝謝