翻譯：使用v-bind和v-on的自適應組件

時間 2019-11-05

標籤翻譯使用 bind 自適應組件欄目 CSS 简体版

原文原文鏈接

前言

爲了提升英文水平，嘗試着翻譯一些英文技術文章，首先就從這個Vue的小技巧文章開始，目前英文版一共22篇。計劃用時2~3個月翻譯完成。javascript

目前進度[5/22]vue

原文連接

Adaptive components using v-bind and v-onjava

譯文

當您使用基於組件的技術時，一旦應用程序開始快速增加，你須要對組件歸類和解構，使它們儘量簡單和可維護。post

組件組合是一種強大的流行模式，它有助於在基於組件的技術上覆用代碼...可是組件組合是什麼鬼東西？儘管如此，它仍是一個通用的概念，好比說，你想使用組件組合時，你能夠經過一個或者多個組件相互結合的方式建立組件。性能

舉個例子，咱們可能有一個基礎組件，名字叫BaseList，而後你建立一個相似的組件而且在它上面添加一些額外的功能，叫SortableList。我稱它們爲自適應組件（也就是代理或者包裝組件）。spa

當開發自適應組件時，你一般但願SortableList與最初的BaseList組件保持相同的API，以維持組件的一致性。這意味着你須要從SortableList向下傳遞全部屬性並監聽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的工做方式與將全部屬性逐個地傳遞給AppList基本相同，可是是在對象中一次性的傳遞全部。$props是組件實例中包含該組件全部屬性的對象。代理

能夠想象，v-on="$listener"的工做方式徹底相同，只是它是事件。code

這也適用於使用v-model的雙向綁定組件。若是你不知道，v-model是簡寫，用於傳遞value屬性而且監聽input事件。

最後，記住在vue.js中，咱們必須顯式聲明組件的props，以便於解釋（這句太難翻譯 in order to be interpreted as such，interpreted 求教大佬後，說是解釋器的意思，as such 字面上是所以，這樣，用在這裏我認爲是一種增強前面語氣的意思，有大佬給個好的翻譯的沒）。一個開發自適應組件快的方式是使用基礎組件的props來定義它們，像我同樣props: AppList.props。

就這樣！也許你沒有看到自適應組件的實際應用，在下一篇文章，我將構建一個自定義組件的真實案例，這樣你就能夠看見它的實際效果。敬請期待！

你能夠在線閱讀文章tip online（能夠複製/粘貼代碼），可是請你記住，若是你喜歡，要和全部同事分享VueDose。

下週見。