A functional component is stateless, it cannot be instantiated, it does not have any lifecycle and methods. Creating functional components is also as simple as adding a functional declaration to the template. It is generally suitable for components that only depend on changes in external data. Because of their light weight, rendering performance will be improved.
Everything the component needs is passed through the context parameter, which contains a lot of parameters, among which props: an object that provides all the bound properties.
// 函数式组件：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);
},
}
}
Applicable scenarios:
Generally suitable for components that only depend on changes in external data . Extract and package components in time, don't put all components in one .vue.