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

PursuitFreeDom發表於2018-03-23
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,謝謝

相關文章