本文共 2058 字，大约阅读时间需要 6 分钟。

函数式组件

当组件不需要状态、生命周期处理或复杂的响应式数据时，可以将其定义为函数式组件。这种组件仅通过props接收输入数据进行渲染。

函数式组件的特点

函数式组件的核心特点在于其简洁性和灵活性。它通过render函数接收context对象，包含必要的上下文信息，如props、slots、children等。这些信息帮助组件在渲染过程中实现复杂的逻辑和结构化的组件组合。

props和slots

props的作用

props是组件接收的属性参数。它们可以通过context对象在render函数中访问。例如：

export default {  functional: true,  props: {    level: {      type: Number,      required: true    }  },  render(h, context) {    const { props } = context;    const tag = `h${props.level}`;    return 
   
    {slots().default}
   ;  }};

slots的使用

slots用于定义插槽。插槽可以是非作用域的默认插槽或具名插槽。例如：

export default {  functional: true,  render(h, context) {    const { slots, scopedSlots } = context;    return (      
        {slots().default() // 默认插槽        scopedSlots.default({ text: '默认插槽' }) // 具名插槽      
    );  }};

data、listeners、injections和children

data

data对象提供了组件的上下文信息，包括父组件的引用等。例如：

export default {  functional: true,  render(h, context) {    const { data } = context;    console.log(data);    // 渲染逻辑  }};

listeners

listeners用于接收父组件注册的事件监听器。例如：

export default {  functional: true,  render(h, context) {    const { listeners } = context;    console.log(listeners);    // 渲染逻辑  }};

injections

injections用于从父组件注入必要的属性。例如：

export default {  functional: true,  inject: ['name'],  render(h, context) {    const { injections } = context;    console.log(injections);    // 渲染逻辑  }};

children

children用于处理组件的子节点。这些子节点可以是其他组件或普通的DOM元素。例如：

export default {  functional: true,  render(h, context) {    const { children } = context;    console.log(children);    // 渲染逻辑  }};

slots()与children的区别

示例1

     
      
    
     div
    
  
    
p
  
    
   

• slots() 结果：

  {  default: [div, p, template],  header: [div]}

• children 结果：

  [div, p, template]

示例2

     
      
      
    
p
  
    
   

• slots() 结果：

  {  default: [div],  header: [div]}

• children 结果：

  [div, p, template]

基于模板的函数式组件

在 Vue 2.5.0 及以上版本中，可以使用 <template functional> 标签定义基于模板的函数式组件。这种方式适用于单文件组件。

通过上述方法，可以轻松创建高效且灵活的函数式组件，充分发挥 Vue.js 的优势。