Vue組建通訊

組件的通訊

通常常見的組件之間的通訊有如下幾種狀況，A和B，B和C，B和D之間都是父子關係，C和D之間是兄弟組件關係。

經常使用的通訊手段有兩種：

1.ref：給元素或組件註冊引用信息 2.children:訪問父級組件和子組件的實例。 這兩種方式都是直接經過實例的方式獲取的方式。示例以下：

//comA組件A
export default {
  data () {
    return {
      title: '測試通訊'
    }
  },
  methods: {
    sayHello () {
      window.alert('你好');
    }
  }
}
複製代碼

這裏引用組件A
<template>
  <comA ref="comA"></comA>
</template>
<script>
  export default {
    mounted () {
      const comA = this.$refs.comA;
      console.log(comA.title);  // 測試通訊
      comA.sayHello();  // 調用組件comA的方法
    }
  }
</script>
複製代碼

上面的例子咱們能夠看出咱們使用ref來獲取組件的實例上的方法和數據

<div id="count">
    <button @click="showmsg">
      顯示兩個組件的信息
    </button>
        <child1></child1>
    <child2></child2>
    </div>
<template id="child1">
  <div>
    {{ msg }}
  </div>
</template>
<template id="child2">
  <div>
    {{ msg }}
  </div>
</template>
<script>
    Vue.component('child1', {
      template: '#child1',
      data () {
        return {
          msg: '這是子組件1的信息'
        }
      }
    })
    Vue.component('child2', {
      template: '#child2',
      data () {
        return {
          msg: '這是子組件2的信息'
        }
      }
    })
    new Vue({
      el: '#count',
      data: {
        
      },
      methods: {
        showmsg () {
            for(var i = 0; i < this.$children.length; i++) {
            alert(this.$children[i].msg)
          }
        }
      }
    })
</script>
複製代碼

$children 返回全部子組件的實例，是一個數組

<div id="count">
    父組件中的msg: {{ msg }}
        <child1 ref='c1'></child1>
    <child2 ref='c2'></child2>
    </div>
<template id="child1">
  <div>
    {{ msg }}
    <button @click="showpmsg">
      顯示父組件msg
    </button>
  </div>
</template>
<template id="child2">
  <div>
    {{ msg }}
  </div>
</template>
<script>
    Vue.component('child1', {
      template: '#child1',
      data () {
        return {
          msg: '這是子組件1的信息'
        }
      },
      methods: {
        showpmsg () {
                alert(this.$parent.msg)
        }
      }
    })
    Vue.component('child2', {
      template: '#child2',
      data () {
        return {
          msg: '這是子組件2的信息'
        }
      }
    })
    new Vue({
      el: '#count',
      data: {
        msg: 'hello parent'
      }
    })
</script>
複製代碼

這兩種方式是基於組件的上下文環境訪問到父組件或者所有子組件（數組）。這種方式有很大的弊端是，沒法跨級或兄弟間進行通訊，好比以下的結構

// parent.vue
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
複製代碼

咱們假如想在組件A中獲取其餘組件那麼咱們可能須要使用vuex或者和Bus事件總線的方式進行解決。

事件總線

定義事件總線的方式有如下兩種

// bus.js 事件總線

import Vue from 'vue'
export const $bus = new Vue()
複製代碼

// main.js咱們再main入口中定義這個事件總線
Vue.prototype.$bus = new Vue()
複製代碼

發送事件

對下面comA說明，會接收來自父組件的參數number，並顯示出來；有個按鈕，點擊會調用函數handleAddRandom，生成一個隨機數，並調用事件總線的$emit方法，將隨機數給事件總線，由事件總線進行數據傳遞。

<template>
  <div>
    {{number}}
    <button @click="handleAddRandom">隨機增長</button>
  </div>
</template>

<script>
import $bus from ../bus.js
  export default {
    name: "counter",
    props: {
      number: {
        type: Number
      }
    },
    methods: {
      handleAddRandom() {
        const num = Math.floor(Math.random() * 100 + 1);
        console.log("生產的num:" + num);
        this.$bus.$emit('add', num);
      }
    }
  }
</script
複製代碼

接收事件

<template>
  <div>
    隨機增長:
    <counter :number="number"></counter>
  </div>
</template>

<script>
  import counter from './counter'

  export default {
    name: "index",
    components: {
      counter
    },
    data() {
      return {
        number: 0
      }
    },
    methods: {
      handleAddRandom(num) {
        this.number += num;
      }
    },
    created() {
      //this.$bus.$on須要在created中使用，不然不會生效
      this.$bus.$on('add', this.handleAddRandom);
    },
    beforeDestroy() {
      //須要在beforeDestroy中移除
      this.$bus.$off('add', this.handleAddRandom);
    }
  }
</script>

<style scoped>

</style>
複製代碼

上面是咱們經過事件總線的方式進行通訊 而後咱們來講下另外一種能夠媲美Vuex的一種方式provide / inject

provide / inject

提及這兩個API可能你們不太明白咱們來舉例子說明

// A組件
export default {
  provide: {
    name: 'Aresn'
  }
}

// B組件
export default {
  inject: ['name'],
  mounted () {
    console.log(this.name);  // Aresn
  }
}
複製代碼

代碼中咱們能夠看到咱們再組件A中設置了一個provide:{name："Aresn"}，這個方法的做用就是將該變量提供給全部的子組件。咱們在B組件中咱們使用indect獲取了這個變量，這樣咱們就可使用this.name獲取到這個那麼變量。下面咱們可使用一些騷操做大膽的替代Vuex。（這裏說明一下官網中不建議咱們是使用這兩個API在常規應用程序中，建議使用在高階組件中，建議歸建議用的好就能夠啦）

使用provide / inject期待Vuex

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {

  }
</script>
複製代碼

Vue cli中搭建出來的項目結構中都會有一個app.vue做爲入口組件，咱們可使用這個API在上面大作文章。

<script>
  export default {
    provide () {
      return {
        app: this
      }
    },
    data () {
      return {
        userInfo: null
      }
    },
    methods: {
      getUserInfo () {
        // 這裏經過 ajax 獲取用戶信息後，賦值給 this.userInfo，如下爲僞代碼
        $.ajax('/user/info', (data) => {
          this.userInfo = data;
        });
      }
    },
    mounted () {
      this.getUserInfo();
    }
  }
</script>
複製代碼

這裏咱們把根組件實例做爲一個參數傳遞給app變量，下面咱們就能夠經過app[變量||方法]達到vuex的目的

<template>
  <div>
    {{ app.userInfo }}
  </div>
</template>
<script>
  export default {
    inject: ['app'],
    methods: {
      changeUserInfo () {
        // 這裏修改完用戶數據後，通知 app.vue 更新，如下爲僞代碼
        $.ajax('/user/update', () => {
          // 直接經過 this.app 就能夠調用 app.vue 裏的方法
          this.app.getUserInfo();
        })
      }
    }
  }
</script>
複製代碼

可是這樣作有一個弊端那就是可能會讓根組件app.vue的代碼變得特別的臃腫，固然也有解決辦法，咱們可使用mixins混合的方式將不一樣的邏輯分開寫到不一樣的js裏面而後經過 mixins: [mixins_user]的方式在app.vue中引用這個mixin。