原文作者：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
- 个人微信公众号：搜索「程序猿何大叔」
请求翻译授权记录
觉得本文不错的话，分享一下给小伙伴吧~
