3.Vue非父子組件之間的通訊

Vue非父子組件之間的通訊

若是不是父子組件須要通訊,那將怎樣實現呢?
首先咱們須要建立一個事件中心,經過事件中心來接收或者傳遞事件,做爲一箇中轉站

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,謝謝