【译】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
• 我的微信公众号：搜索「程序猿何大叔」

请求翻译受权记录

---

以为本文不错的话，分享一下给小伙伴吧~