vue函数式组件

小趴菜呢

已于 2022-11-15 15:09:27 修改

阅读量648

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-11-15 15:06:29 首次发布

本文链接：https://blog.csdn.net/weixin_45442630/article/details/127865789

版权

vue 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

本文介绍了Vue中的函数式组件，这是一种不包含状态和实例的组件，适用于简单展示型组件。函数式组件没有响应式能力，不支持`this`关键字，主要依赖props传递数据。由于其轻量级的特性，渲染性能较高。文中展示了函数式组件的编写方式，以及如何在模板中使用。这种组件在只依赖外部数据且无需复杂逻辑的场景下非常适用。

摘要由CSDN通过智能技术生成

vue的函数式组件是一个不包含状态和实例的组件；该组件不支持响应式，并且不能通过this关键字引用，用于定义没有响应数据，也不需要有任何生命周期的场景，只接受一些props来显示组件。函数式组件(不要与vue的render函数混淆)是一个不包含状态和实例的组件。
优点：非常轻量，因而渲染性能高，特别适合用来只依赖外部数据传递而变化的组件。
写法：
在template标签中标明functional;只接受props值；不需要script标签

  <!-- 函数式组件 -->
<template functional>
  <div>
    <div>
      {{ props.items }}
    </div>
  </div>
</template>

使用组件

<template>
  <div>
     <div v-for="(item,index) in list" :key="index" class="list">
      <ListItem :item="item" @click="detail(item)" />
     </div>
  </div>
</template>

<script>
import ListItem from "./ListItem";

export default {
  components: { ListItem },
  data(){
    return {
       list:[]
    }
  },
  methods:{
     detail(item){
     
       }
  }

};
</script>