原文作者：Alex Jover
譯者：程式猿何大叔
特別宣告：本文是作者 Alex Jover 釋出在 VueDose 上的一個系列。
版權歸作者所有。
譯者在翻譯前已經和作者溝通得到了翻譯整個系列的授權。
為了不影響大家閱讀，獲得授權的記錄會放在本文的最後。
正文內容
當你使用基於元件的技術開始編寫程式碼時，一個應用就開始增長，同時你也就需要對元件進行結構化和分類，以便儘可能地保證元件的簡單性和高可維護性。
組合元件是當前一種流行的強大的程式碼組織模式，有助於在基於元件的技術中重用和結構化程式碼... 但到底什麼是元件組合呢？雖然這是一個普遍通用的概念，但假設當你在組合元件時，你是通過一個或多個組合來建立的。
假設我們有一個基礎元件，比如說 BaseList，然後你想要在此基礎上建立一個有額外功能的相類似的元件，比如說 SortableList。我將其稱作為自適應元件（或者是代理元件、包裝元件）。
當你建立該自適應元件時，你往往需要讓 SortableList 擁有和 BaseList 相同的 API，以保證元件的一致性。這就意味著你需要將 SortableList 上的 props 都往下傳遞到 BaseList，並且監聽所有在 BaseList 上的事件。
訣竅就是：使用 v-bind 和 v-on 來完成：
<!-- SortableList -->
<template>
<AppList v-bind="$props" v-on="$listeners"> <!-- ... --> </AppList>
</template>
<script>
import AppList from "./AppList";
export default {
props: AppList.props,
components: {
AppList
}
};
</script>
複製程式碼其中，v-bind 指令的作用與將所有的 props 一個個地傳遞給 AppList 的效果一樣，不同的就是它僅通過傳遞一個物件即可完成。$props 物件包含了元件例項上所有的 prop。
正如你所想的一樣，v-on="$listeners" 也是同樣的原理，只不過針對的是事件 event。
這個技巧在有雙向資料繫結指令 v-model 上的元件也同樣有效，如果你之前不知道，那麼 v-model 只是一個語法糖，是傳遞 value 這個 prop 和監聽 input 事件的簡寫而已。
最後，要記住的是，必須明確地宣告傳遞給元件的 props，這樣元件才能被正確地編譯。一個快速建立響應式元件的方法就是使用基礎元件的 props 來定義它們。就像我在程式碼中所寫的 props: AppList.props。
以上就是今天的全部內容，或者你還沒有看到響應式元件的實際應用，不用擔心，下一節我就會給出一個響應式元件的實際應用案例，敬請期待。
你可以線上閱讀這篇 原文，裡面有可供複製貼上的原始碼。如果你喜歡這個系列的話，請分享給你的同事們！
結語
此係列的其他文章，會同步系列官網的釋出情況，及時地翻譯釋出到掘金。請持續關注「程式猿何大叔」，相信我會給大家帶來更多優質的內容，不要忘了點贊~
如果想要了解譯者的更多，請查閱如下：
- 個人部落格：blog.hadesz.com
- 個人 github 倉庫：github.com/hadeshe93
- 個人微信公眾號：搜尋「程式猿何大叔」
請求翻譯授權記錄
覺得本文不錯的話，分享一下給小夥伴吧~