vue工作开发总结（二）---- 函数式组件

最新推荐文章于 2025-05-04 20:28:51 发布

置顶随风小薇

最新推荐文章于 2025-05-04 20:28:51 发布

阅读量495

点赞数

分类专栏： vue 文章标签： vue js 函数值组件

本文为博主原创文章，未经博主允许不得转载

本文链接：https://blog.youkuaiyun.com/qq_39197547/article/details/106494075

版权

vue 专栏收录该内容

34 篇文章 ¥299.90 ¥399.90

订阅专栏

本文探讨了Vue中的函数式组件，这类组件无状态、无生命周期，仅依赖外部数据变化。通过context对象传递props，提高了渲染性能。适用于简单场景。详细信息可参考官方文档。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

函数式组件是无状态的，无法实例化，没有任何的生命周期和方法。创建函数式组件也很简单，只需要在模板添加functional声明即可。一般适合只依赖外部数据的变化而变化的组件，因其轻量，渲染性能也会有所提高。

组件需要得一切都是通过context参书传递。它是一个上下文对象。这里的props是一个包含所有绑定属性的对象。

函数式组件定义：

<template functional>
  <div class="list">
    <div class="item" v-for="item in props.list" :key="item.id" @click="props.itemClick(item)">
       <p>{
  {item.title}}</p>
       <p>{
  {item.content}}</p>
    </div>
  </div>
</template>

在父组件使用：
<template>
    <div>
       <List :list="list" :itemClick="item => (currentItem = item)"

了解本专栏