特别声明:本文是作者 Alex Jover 发布在 VueDose 上的一个系列。

版权归作者所有。

译者在翻译前已经和作者沟通得到了翻译整个系列的授权。

为了不影响大家阅读,获得授权的记录会放在本文的最后。

正文内容

当你使用基于组件的技术开始编写代码时,一个应用就开始增长,同时你也就需要对组件进行结构化和分类,以便尽可能地保证组件的简单性和高可维护性。

组合组件是当前一种流行的强大的代码组织模式,有助于在基于组件的技术中重用和结构化代码… 但到底什么是组件组合呢?虽然这是一个普遍通用的概念,但假设当你在组合组件时,你是通过一个或多个组合来创建的。

假设我们有一个基础组件,比如说 BaseList,然后你想要在此基础上创建一个有额外功能的相类似的组件,比如说 SortableList。我将其称作为自适应组件(或者是代理组件、包装组件)。

当你创建该自适应组件时,你往往需要让 SortableList 拥有和 BaseList 相同的 API,以保证组件的一致性。这就意味着你需要将 SortableList 上的 props 都往下传递到 BaseList,并且监听所有在 BaseList 上的事件。

诀窍就是:使用 v-bindv-on 来完成:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 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

以上就是今天的全部内容,或者你还没有看到响应式组件的实际应用,不用担心,下一节我就会给出一个响应式组件的实际应用案例,敬请期待。

你可以在线阅读这篇 原文,里面有可供复制粘贴的源代码。如果你喜欢这个系列的话,请分享给你的同事们!

结语

由于公众号文章不允许放置外链,大家可以点击文章最下方左侧的「阅读原文」,至掘金社区阅读。

此系列的其他文章,会同步系列官网的发布情况,及时地翻译发布到掘金。请持续关注「程序猿何大叔」,相信我会给大家带来更多优质的内容,不要忘了点赞~

如果想要了解译者的更多,请查阅如下:

请求翻译授权记录

请求翻译授权记录



微信公众号


觉得本文不错的话,分享一下给小伙伴吧~