{age: '24', sex: 'male'}

為什么我們一開(kāi)始傳遞了三個(gè)屬性，最后只打印了兩個(gè)屬性 age 和 sex 呢？因?yàn)樵?ComponentC 的props 中聲明了 name 屬性，$attrs 會(huì)自動(dòng)排除掉在 props 中聲明的屬性，并將其他屬性以對(duì)象的形式輸出。

說(shuō)白了就是一句話，$attrs 可以獲取父組件中綁定的非 Props 屬性。

一般在使用的時(shí)候會(huì)同時(shí)和 inheritAttrs 屬性配合使用。

如果你不希望組件的根元素繼承 attribute，你可以在組件的選項(xiàng)中設(shè)置 inheritAttrs: false。

在 ComponentB 添加了 inheritAttrs=false 屬性后，ComponentB 的dom結(jié)構(gòu)中可以看到是不會(huì)繼承父組件傳遞過(guò)來(lái)的屬性：

如果不加上 inheritAttrs=false 屬性，就會(huì)自動(dòng)繼承父組件傳遞過(guò)來(lái)的屬性：

再看下 $listeners 的定義：

包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽(tīng)器。它可以通過(guò) v-on="$listeners" 傳入內(nèi)部組件——在創(chuàng)建更高層次的組件時(shí)非常有用。

$listeners也能把父組件中對(duì)子組件的事件監(jiān)聽(tīng)全部拿到，這樣我們就能用一個(gè)v-on把這些來(lái)自于父組件的事件監(jiān)聽(tīng)傳遞到下一級(jí)組件。

繼續(xù)改造 ComponentB 組件：

<template>
  <div>
    I am component B
    <component-c v-bind="$attrs" v-on="$listeners"></component-c>
  </div>
</template>
<script>
import ComponentC from '@/components/ComponentC.vue'

export default {
  name: 'ComponentB',
  inheritAttrs: false,
  components: {
    ComponentC
  }
}
</script>

這里利用 $attrs 和 $listeners 方法，可以將祖先組件(ComponentA) 中的屬性和事件透?jìng)鹘o孫組件(ComponentC)，這樣就可以實(shí)現(xiàn)隔代組件之間的通信。

provide/inject

provide/inject 是 Vue 2.2.0 版本后新增的方法。

這對(duì)選項(xiàng)需要一起使用，以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在其上下游關(guān)系成立的時(shí)間里始終生效。如果你熟悉 React，這與 React 的上下文特性很相似。

先看下簡(jiǎn)單的用法：

父級(jí)組件：

export default {
  provide: {
    name: 'Lin'
  }
}

子組件：

export default {
  inject: ['name'],
  mounted () {
    console.log(this.name);  // Lin
  }
}

上面的例子可以看到，父組件通過(guò) privide 返回的對(duì)象里面的值，在子組件中通過(guò) inject 注入之后可以直接訪問(wèn)到。

但是需要注意的是，provide 和 inject 綁定并不是可響應(yīng)的，按照官方的說(shuō)法，這是刻意為之的。

也就是說(shuō)父組件 provide 里面的name屬性值變化了，子組件中 this.name 獲取到的值不變。

如果想讓 provide 和 inject 變成可響應(yīng)的，有以下兩種方式：

• provide 祖先組件的實(shí)例，然后在子孫組件中注入依賴，這樣就可以在子孫組件中直接修改祖先組件的實(shí)例的屬性，不過(guò)這種方法有個(gè)缺點(diǎn)就是這個(gè)實(shí)例上掛載很多沒(méi)有必要的東西比如props，methods
• 使用 Vue 2.6 提供的 Vue.observable 方法優(yōu)化響應(yīng)式 provide

看一下第一種場(chǎng)景：

祖先組件組件(ComponentA)：

export default {
  name: 'ComponentA',
  provide() {
    return {
      app: this
    }
  },
  data() {
    return {
       appInfo: {
         title: ''
       }
    }
  },
  methods: {
    fetchAppInfo() {
      this.appInfo = { title: 'Welcome to Vue world'}
    }
  }
}

我們把整個(gè) ComponentA.vue 的實(shí)例 this 對(duì)外提供，命名為 app。接下來(lái)，任何組件只要通過(guò) inject 注入 app 的話，都可以直接通過(guò) this.app.xxx 來(lái)訪問(wèn) ComponentA.vue 的 data、computed、methods 等內(nèi)容。

子組件(ComponentB):

<template>
  <div>
    {{ title }}
    <button @click="fetchInfo">獲取App信息</button>
  </div>
</template>
<script>
export default {
  name: 'ComponentB',
  inject: ['app'],
  computed: {
    title() {
      return this.app.appInfo.title
    }
  },
  methods: {
    fetchInfo() {
      this.app.fetchAppInfo()
    } 
  }
}
</script>

這樣，任何子組件，只要通過(guò) inject 注入 app 后，就可以直接訪問(wèn)祖先組件中的數(shù)據(jù)了,同時(shí)也可以調(diào)用祖先組件提供的方法修改祖先組件的數(shù)據(jù)并反應(yīng)到子組件上。

當(dāng)點(diǎn)擊子組件(ComponentB)的獲取App信息按鈕，會(huì)調(diào)用 this.app.fetchAppInfo 方法，也就是訪問(wèn)祖先組件(ComponentA)實(shí)例上的 fetchAppInfo 方法，fetchAppInfo 會(huì)修改fetchAppInfo的值。同時(shí)子組件(ComponentB)中會(huì)監(jiān)聽(tīng) this.app.appInfo 的變化，并將變化后的title值顯示在組件上。

再看一下第二種場(chǎng)景，通過(guò) Vue.observable 方法來(lái)實(shí)現(xiàn) provide 和 inject 綁定并可響應(yīng)。

基于上面的示例，改造祖先組件(ComponentA)：

import Vue from 'vue'

const state = Vue.observable({ title: '' });
export default {
  name: 'ComponentA',
  provide() {
    return {
      state
    }
  }
}

使用 Vue.observable 定義一個(gè)可響應(yīng)的對(duì)象 state，并在 provide 中返回這個(gè)對(duì)象。

改造子組件(ComponentB):

<template>
  <div>
    {{ title }}
    <button @click="fetchInfo">獲取App信息</button>
  </div>
</template>
<script>
export default {
  name: 'ComponentInject',
  inject: ['state'],
  computed: {
    title() {
      return this.state.title
    }
  },
  methods: {
    fetchInfo() {
      this.state.title = 'Welcome to Vue world22'
    } 
  }
}
</script>

與之前的例子不同的是，這里我們直接修改了 this.state.title 的值，因?yàn)?state 被定義成了一個(gè)可響應(yīng)的數(shù)據(jù)，所以 state.title 的值被修改后，視圖上的 title 也會(huì)立即響應(yīng)并更新，從這里看，其實(shí)很像 Vuex 的處理方式。

以上兩種方式對(duì)比可以發(fā)現(xiàn)，第二種借助于 Vue.observable 方法實(shí)現(xiàn) provide 和 inject 的可響應(yīng)更加簡(jiǎn)單高效，推薦大家使用這種方式。

基于 $parent/$children 實(shí)現(xiàn)的 dispatch 和 broadcast

先了解下 dispatch 和 broadcast 兩個(gè)概念：

• dispatch: 派發(fā)，指的是從一個(gè)組件內(nèi)部向上傳遞一個(gè)事件，并在組件內(nèi)部通過(guò) $on 進(jìn)行監(jiān)聽(tīng)
• broadcast: 廣播，指的是從一個(gè)組件內(nèi)部向下傳遞一個(gè)事件，并在組件內(nèi)部通過(guò) $on 進(jìn)行監(jiān)聽(tīng)

在實(shí)現(xiàn) dispatch 和 broadcast 方法之前，先來(lái)看一下具體的使用方法。有 ComponentA.vue 和 ComponentB.vue 兩個(gè)組件，其中 ComponentB 是 ComponentA 的子組件，中間可能跨多級(jí)，在 ComponentA 中向 ComponentB 通信：

組件ComponentA:

<template>
  <button @click="handleClick">派發(fā)事件</button>
</template>
<script>
import Emitter from '../mixins/emitter.js';
export default {
  name: 'ComponentA',
  mixins: [Emitter],
  methods: {
    handleClick () {
      this.dispatch('ComponentB', 'on-message', 'Hello Vue.js')
    }
  }
}
</script>

組件ComponentB:

export default {
  name: 'ComponentB',
  created () {
    this.$on('on-message', this.showMessage)
  },
  methods: {
    showMessage (text) {
      console.log(text)
    }
  }
}

dispatch 的邏輯寫在 emitter.js 中，使用的時(shí)候通過(guò) mixins 混入到組件中，這樣可以很好的將事件通信邏輯和組件進(jìn)行解耦。

dispatch 的方法有三個(gè)傳參，分別是：需要接受事件的組件的名字(全局唯一，用來(lái)精確查找組件)、事件名和事件傳遞的參數(shù)。

dispatch 的實(shí)現(xiàn)思路非常簡(jiǎn)單，通過(guò) $parent 獲取當(dāng)前父組件對(duì)象，如果組件的name和接受事件的name一致(dispatch方法的第一個(gè)參數(shù))，在父組件上調(diào)用 $emit 發(fā)射一個(gè)事件，這樣就會(huì)觸發(fā)目標(biāo)組件上 $on 定義的回調(diào)函數(shù)，如果當(dāng)前組件的name和接受事件的name不一致，就遞歸地向上調(diào)用此邏輯。

dispath:

export default {
  methods: {
    dispatch(componentName, eventName, params) {
      let parent = this.$parent || this.$root;
      let name = parent.$options.name;
      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;
        if (parent) {
          name = parent.$options.name
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    }
  }
}

broadcast邏輯和dispatch的邏輯差不多，只是一個(gè)是通過(guò) $parent 向上查找，一個(gè)是通過(guò) $children 向下查找，

export default {
  methods: {
    broadcast(componentName, eventName, params) {
      this.$children.forEach(child => {
        const name = child.$options.name
        if (name === componentName) {
          child.$emit.apply(child, [eventName].concat(params))
        } else {
          broadcast.apply(child, [componentName, eventName].concat([params]))
        }
      })
    }
  }
}

到此這篇關(guān)于Vue組件間的通信方式詳析的文章就介紹到這了,更多相關(guān)Vue組件通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！