【译】Vue实用笔记（五）：适配型组件的指令v-bind和v-on

当你使用组件思想编程时，随着应用功能的增加，为了保证组件的简洁和稳定，你不得不对你的组件进行分类和架构。

在组件思想编程中，组合组件是一个非常强大的重用和架构代码的模式。那么组合组件的让我们头疼的地方是什么呢？尽管这是一个大家都认可的概念，组合组件就是拼装已有的一个或者多个组件。

一旦我们有了一个基础组件，如BaseList，现在你想在这个基础上增加一点新功能创建一个相似的组件，如 SortableList。 我们称这样的组件为适配型组件（代理或外壳组件）。

当我们编写一个适配型组件时，为了保证组件的一致性，通常希望SortableList组件和BaseList保持相同的API。这就意味着SortableList组件要通过props传递所有的属性，并且监听BaseList的所有事件。

奇技淫巧：你可以通过v-bind 和 v-on实现上面的功能：

v-bind通过传递一个对象代替一个一个地传递所有的props属性给BasicList。$props这个组件实例的所有属性。

v-on="$listeners"同样的道理，可以传监听有的事件。

这个也同样适用于双向绑定的v-model，因为v-model其实就是传递一个value属性和监听一个input的缩写。

最后，记得为了能被追踪，Vue.js 必须精确的声明组件的props属性。所以，一个快速的声明适配型组件props的方法是使用基础组件的props属性来定义他们，例如props: BasicList.props 。

以上就是全部内容了，如果你还没有感受到适配型组件的实际使用场景，请看下回分解。

Remember you can read this tip online (with copy/pasteable code), and don’t forget to share VueDose with your colleagues, so they also know about these tips as well!

See you next week.

Alex