【譯】Vue 的小奇技（第五篇）：使用 v-bind 和 v-on 打造自適應組件

• 原文地址：Adaptive components using v-bind and v-on

• 原文做者：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
• 我的微信公衆號：搜索「程序猿何大叔」

請求翻譯受權記錄

---

以爲本文不錯的話，分享一下給小夥伴吧~