前言
为了提高英文水平,尝试着翻译一些英文技术文章,首先就从这个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
监听事件。
结尾
水平有限,难免有错漏之处,望各位大大轻喷的同时能够指出,跪谢!
其它翻译
1、翻译:提高vue.js中大型数据的性能
2、翻译:测量vue应用运行时的性能!
3、翻译:使用PurgeCSS删除未使用的CSS
4、翻译:Vue.js 2.6.0 中的新指令v-slot
5、翻译:使用v-bind和v-on的自适应组件