原文作者: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
- 個人微信公眾號:搜尋「程式猿何大叔」
請求翻譯授權記錄
覺得本文不錯的話,分享一下給小夥伴吧~