vue3 使用function方法

下面是一个使用函数式组件的示例：

javascript复制代码

import { h } from 'vue';

const FunctionalComponent = (props, context) => { // 在这里可以使用 props 和 context 参数 const { attrs, slots, emit } = context;

// 返回要渲染的虚拟节点

return h('div', { class: 'functional-component' }, [ h('p', `Props: ${JSON.stringify(props)}`), h('p', `Attrs: ${JSON.stringify(attrs)}`), slots.default ? slots.default() : null,

h('button', { onClick: () => emit('click') }, 'Click me'), ]); };

export default FunctionalComponent;

在这个示例中，我们导入了 h 函数，它是 Vue 3 中用于创建虚拟节点的函数。然后，我们定义了一个名为 FunctionalComponent 的函数，它接收 props 和 context 两个参数。props 是传递给组件的属性，context 提供了一些有用的上下文信息，如插槽（slots）和事件发射（emit）等。

在函数体内，我们可以使用 h 函数创建虚拟节点，并返回它们。在这个示例中，我们创建了一个包含一些文本和一个按钮的 div 元素。我们还使用了 slots.default 来渲染任何传递给组件的默认插槽内容。最后，我们使用 emit 函数来触发一个名为 click 的自定义事件。 要使用这个函数式组件，你可以在父组件中这样使用它：

javascript复制代码

import { defineComponent } from 'vue';

import FunctionalComponent from './FunctionalComponent.vue';

export default defineComponent({ components: { FunctionalComponent, }, // ... });

在模板中，你可以像使用其他组件一样使用这个函数式组件：

html复制代码

请注意，函数式组件在 Vue 3 中是默认启用的，你不需要额外的配置或插件来使用它们。