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