函数式组件

函数式组件是无状态，它无法实例化，没有任何的生命周期和方法。创建函数式组件也很简单，只需要在模板添加 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中。