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

1,347 阅读3分钟

前言

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

目前进度[5/22]

原文链接

Adaptive components using v-bind and v-on

译文

当您使用基于组件的技术时,一旦应用程序开始快速增长,你需要对组件归类和解构,使它们尽可能简单和可维护。

组件组合是一种强大的流行模式,它有助于在基于组件的技术上复用代码...但是组件组合是什么鬼东西?尽管如此,它还是一个通用的概念,比如说,你想使用组件组合时,你可以通过一个或者多个组件相互结合的方式创建组件。

举个例子,我们可能有一个基础组件,名字叫BaseList,然后你创建一个类似的组件并且在它上面添加一些额外的功能,叫SortableList。我称它们为自适应组件(也就是代理或者包装组件)。

当开发自适应组件时,你通常希望SortableList与最初的BaseList组件保持相同的API,以维持组件的一致性。这意味着你需要从SortableList向下传递所有属性并监听BaseList的所有事件。

这是诀窍:你可以使用v-bindv-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的自适应组件