函数式组件是无状态,它无法实例化,没有任何的生命周期和方法。创建函数式组件也很简单,只需要在模板添加 functional声明即可。一般适合只依赖于外部数据的变化而变化的组件,因其轻量,渲染性能也会有所提高。
组件需要的一切都是通过 context 参数传递,包含很多参数,其中props:提供所有绑定属性的对象。
// 函数式组件:SonF.vue
<template functional>
<div class="list">
<div class="item" v-for="item in props.list" :key="item.id" @click="props.itemClick(item)">
<p>{
{
item.name}}</p>
<p>{
{
item.age}}</p>
</div>
</div>
</template>
// 父组件使用SonF.vue
template>
<div>
<Son :list="list" :itemClick="itemClick" />
</div>
</template>
复制代码
import Son from '@/components/SonF.vue'
export default {
components: {
Son
},
data() {
return {
list: [{
title: 'title',
content: 'content'
}],
}
}
methods:{
itemClick(value){
console.log(value);
},
}
}
适用场景:
一般适合只依赖于外部数据的变化而变化的组件。及时的提取并封装组件,不要把所有的组件都放在一个.vue中。