特别声明:本文是作者 Alex Jover 发布在 VueDose 上的一个系列。
版权归作者所有。
译者在翻译前已经和作者沟通得到了翻译整个系列的授权。
为了不影响大家阅读,获得授权的记录会放在本文的最后。
正文
有时候,我们不需要复杂的组件,甚至在一些场景下,我们不需要那些组件保持自己的状态。比如说构建那些内部不需要太多逻辑的 UI 组件。
像这样的情况,函数式组件实在是再合适不过了。这种组件自身是无状态的、无实例的,这就意味着它获取不到自身的实例,因此无法调用 this.$emit
等实例方法。
这也就很容易说明了,这些组件更高效、更轻量。
剩下的问题就是,我该什么时候去使用函数式组件?很简单,就当组件仅依赖于 props
时。
举个例子:
<template>
<div>
<p v-for="item in items" @click="$emit('item-clicked', item)">
{{ item }}
</p>
</div>
</template>
<script>
export default {
props: ["items"]
};
</script>
复制代码
就可以被写成如下函数式组件:
<template functional>
<div>
<p v-for="item in props.items" @click="props.itemClick(item);">
{{ item }}
</p>
</div>
</template>
复制代码
要注意下面这些改动事项:
- 在
template
标签上追加一个functional
属性。 - 通过
props
属性,父组件传入的 props 可以被访问到。 - 由于我们无法访问到实例的方法
$emit
,我们可以使用 props 中的一个函数进行触发事件;React 社区就总是这么做的,而且做得很好。 - 单文件组件中的
script
部分就不需要了。
你想看看在实践中怎么使用吗?上 CodeSandbox 看看这个 例子 吧!
你可以在线阅读这篇 原文,里面有可供复制粘贴的源代码。如果你喜欢这个系列的话,请分享给你的同事们!
结语
此系列的其他文章,会同步系列官网的发布情况,及时地翻译发布到掘金。请持续关注「程序猿何大叔」,相信我会给大家带来更多优质的内容,不要忘了点赞~
如果想要了解译者的更多,请查阅如下:
- 个人博客:blog.hadesz.com
- 个人 github 仓库:github.com/hadeshe93
- 个人微信公众号:搜索「程序猿何大叔」
请求翻译授权记录
觉得本文不错的话,分享一下给小伙伴吧~