當(dāng)你使用組件思想編程時(shí)，隨著應(yīng)用功能的增加，為了保證組件的簡(jiǎn)潔和穩(wěn)定，你不得不對(duì)你的組件進(jìn)行分類和架構(gòu)。

在組件思想編程中，組合組件是一個(gè)非常強(qiáng)大的重用和架構(gòu)代碼的模式。那么組合組件的讓我們頭疼的地方是什么呢？盡管這是一個(gè)大家都認(rèn)可的概念，組合組件就是拼裝已有的一個(gè)或者多個(gè)組件。

一旦我們有了一個(gè)基礎(chǔ)組件，如BaseList，現(xiàn)在你想在這個(gè)基礎(chǔ)上增加一點(diǎn)新功能創(chuàng)建一個(gè)相似的組件，如 SortableList。 我們稱這樣的組件為適配型組件（代理或外殼組件）。

當(dāng)我們編寫一個(gè)適配型組件時(shí)，為了保證組件的一致性，通常希望SortableList組件和BaseList保持相同的API。這就意味著SortableList組件要通過(guò)props傳遞所有的屬性，并且監(jiān)聽(tīng)BaseList的所有事件。

奇技淫巧：你可以通過(guò)v-bind 和 v-on實(shí)現(xiàn)上面的功能：

<!-- SortableList  -->
<template>
  <BasicList v-bind="$props" v-on="$listeners"> <!-- ... --> </BasicList>
</template>

<script>
  import BasicList from "./BasicList";

  export default {
    props: BasicList.props,
    components: {
      BasicList
    }
  };
</script>

v-bind通過(guò)傳遞一個(gè)對(duì)象代替一個(gè)一個(gè)地傳遞所有的props屬性給BasicList。$props這個(gè)組件實(shí)例的所有屬性。

v-on="$listeners"同樣的道理，可以傳監(jiān)聽(tīng)有的事件。

這個(gè)也同樣適用于雙向綁定的v-model，因?yàn)?code>v-model其實(shí)就是傳遞一個(gè)value屬性和監(jiān)聽(tīng)一個(gè)input的縮寫。

最后，記得為了能被追蹤，Vue.js 必須精確的聲明組件的props屬性。所以，一個(gè)快速的聲明適配型組件props的方法是使用基礎(chǔ)組件的props屬性來(lái)定義他們，例如props: BasicList.props 。

以上就是全部?jī)?nèi)容了，如果你還沒(méi)有感受到適配型組件的實(shí)際使用場(chǎng)景，請(qǐng)看下回分解。

Remember you can read this tip online (with copy/pasteable code), and don’t forget to share VueDose with your colleagues, so they also know about these tips as well!

See you next week.

Alex