函数式组件

linwuji的摸爬人生

于 2022-02-05 21:03:01 发布

阅读量639

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_55333190/article/details/122793303

版权

vue 专栏收录该内容

5 篇文章

订阅专栏

Vue函数式组件是一种无状态、无法实例化的组件形式，它没有生命周期方法，适用于仅依赖外部数据呈现的场景。由于其轻量级特性，它们在渲染性能上表现出色。在模板中通过`functional`标记定义，接收props并直接传递给子元素。在给定的例子中，父组件传递`selfArray`和`click`方法给子组件，子组件利用这些props渲染多个按钮，并响应点击事件。

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

Vue 函数式组件 functional

函数式组件

无状态
无法实例化
内部没有任何生命周期处理函数
轻量,渲染性能高,适合只依赖于外部数据传递而变化的组件(展示组件，无逻辑和状态修改)
在template标签里标明functional
只接受props值
不需要script标签

父组件

<template>
  <div class="hello">
    <btn
      :selfArray=[1,2,3]
      :click="click"
    ></btn>
  </div>
</template>

<script>
import btn from './test.vue'
export default {
  components: {
    btn
  },
  name: 'HelloWorld',
  methods: {
    click() {
      alert(1)
    }
  }
}
</script>

子组件

<template functional>
  <div>
    <button
      class="btn"
      v-for="item in props.selfArray"
      :key="item"
      @click="props.click"
    >
      <slot />
      132
    </button>
  </div>
</template>
<style scoped>
.btn {
  width: 50px;
  height: 50px;
  background-color: red;
}
</style>