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