翻译：使用v-bind和v-on的自适应组件

前言

为了提升英文水平，尝试着翻译一些英文技术文章，首先就从这个Vue的小技巧文章开始，目前英文版一共22篇。计划用时2~3个月翻译完成。

目前进度[5/22]

原文连接

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基本相同，可是是在对象中一次性的传递全部。$props是组件实例中包含该组件全部属性的对象。

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

这也适用于使用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。

下周见。

个人理解

你可使用v-bind一次性把全部的props传递给子组件，你也能够用v-on监听事件。

结尾

水平有限，不免有错漏之处，望各位大大轻喷的同时可以指出，跪谢！

其它翻译

一、翻译：提升vue.js中大型数据的性能
二、翻译：测量vue应用运行时的性能！
三、翻译：使用PurgeCSS删除未使用的CSS
四、翻译：Vue.js 2.6.0 中的新指令v-slot
五、翻译：使用v-bind和v-on的自适应组件