Vue 函数式组件
最近学习过程中用到了 Vue 的函数式组件，发现网上相关的资料很少。而在 Vue 3 中函数式组件也不再被推荐使用，这里简单记录下使用函数式组件的一些场景和用法。
Vue 函数式组件是没有状态(没有响应式数据)，也没有实例(没有 this 上下文)。
基于模版的函数式组件
1
2
3
4
5
6
7
8
9
10
11
12
| <template functional>
<div>
...
</div>
</template>
<script>
export default {
props:{
someProp:String
}
}
</script>
|
函数式组件
1
2
3
4
5
6
7
8
| <script>
export default {
functional:true,
render(h){
//...
}
}
</script>
|
在函数式组件 template 中使用 Vue 原型上的属性
1
2
3
4
5
| <template functional>
<div>
{{parent.$route.params.id}}
</div>
<template/>
|
在函数式组件中使用 methods 或 computed
可以使用 Vue 提供的 $options 属性来调用我们自定义的方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <template functional>
<div>
{{$options.userFullName(props.user)}}
</div>
</template>
<script>
export default {
props:{
user:Object
},
userFullName(user){
return `${user.firstName} ${user.lastName}`
}
}
</script>
|
何时使用函数式组件
- 显式逻辑特别简单的组件，也叫哑组件。比如按钮、卡片、标签甚至纯静态的“关于”页面等
- 一个被用来包裹模板置标或丰富其他组件基础功能的高阶组件
- 每当你发现自己陷入了一个循环渲染 (v-for)，其遍历对象往往就适用函数式组件
参考