Vue函数式组件如何巧妙运用，提升开发效率的技巧有哪些？

本文共计1094个文字，预计阅读时间需要5分钟。

函数式组件是一种没有状态管理，也没有监听任何传递给它的状态的组件，也没有生命周期方法。它仅仅是一个接收一些props的函数。简单来说，就是一个无状态和无实例的组件，基本写法如下：一个无状态和无实例的组件，基本写法：。

什么是函数式组件

没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法，它只是一个接受一些 prop 的函数。简单来说是 一个无状态和无实例的组件

基本写法：

Vue.component('my-component', { functional: true, // Props 是可选的 props: { // ... }, // 为了弥补缺少的实例 // 提供第二个参数作为上下文 render: function(createElement, context) { // ... } })

.vue 单文件组件写法

<template functional> ... </template>

因为函数式组件没有 this，参数就是靠 context 来传递的了，有如下字段的对象：

• props：提供所有 prop 的对象
• children：VNode 子节点的数组
• slots：一个函数，返回了包含所有插槽的对象
• scopedSlots：(2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。