vuedose.tips（系列翻译五）

Adaptive components using v-bind and v-on
当您使用基于组件的技术时，一旦应用程序开始增长，就需要对组件进行结构化和分类，以使它们尽可能简单易维护。
组件组合是一种流行的强大模式，可帮助重用和构造基于组件的技术中的代码……但是组件组合到底有什么用呢？ 尽管这是一个通用概念，但可以说当您进行组件合成时，您是在将一个或多个组件组合在一起时创建一个组件。
一种情况是，我们有一个基本组件，例如BaseList，而您想创建一个类似的组件，并在其之上具有一些其他功能，例如SortableList。我称它们为自适应组件（也称为代理或包装器组件）
构建自适应组件时，通常希望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，但是一次在对象中全部传递。 listeners”的工作方式完全相同，但适用于事件
这也适用于使用 v-model 的双向绑定组件。如果您不知道，v-model 是传递value属性并监听输入事件的简写。

最后，请记住，在Vue.js中，我们必须显式声明组件的props才能被这样解释。 建立自适应组件时，一种快速的方法是使用基本组件props来定义它们，就像我在props：AppList.props中所做的那样。
也许您没有看到自适应组件的实际使用？不用担心，在下一个技巧中，我将构建一个自适应组件的真实案例，以便您可以实际使用它。敬请关注！