vue3函数式组件

// Vue 3 函数式组件示例

// 导入 Vue 和 h 函数
import { h } from 'vue';

// 定义一个函数式组件
const FunctionalComponent = (props, { slots }) => {
  // props 是传递给组件的属性对象
  // slots 是插槽的内容

  // 返回 VNode，即虚拟 DOM 节点
  return h('div', { class: 'functional-component' }, [
    h('p', `Props message: ${props.message}`),
    slots.default?.() // 渲染默认插槽内容
  ]);
};

// 设置组件为函数式
FunctionalComponent.props = ['message'];

// 使用组件时不需要实例化，因为它是一个纯函数

export default FunctionalComponent;

解释说明：

1. 导入 Vue 和 h 函数：h 函数用于创建虚拟 DOM 节点。
2. 定义函数式组件：函数式组件是一个纯函数，接收 props 和上下文（包括 slots、attrs 等）作为参数，并返回虚拟 DOM 节点。
3. 返回 VNode：通过 h 函数创建并返回虚拟 DOM 节点。这里创建了一个 div 元素，包含一个 p 元素显示 props.message，以及插槽内容。
4. 设置组件为函数式：通过 props 属性定义组件接收的属性。
5. 使用组件：函数式组件不需要实例化，直接渲染即可。

希望这个示例和解释对你有帮助！