vue 函数式组件

作者：不，完美发布日期:2025-12-06 浏览:116

<template functional>
  <div>
    <p>{{ props.message }}</p>
    <button @click="listeners.handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  name: 'FunctionalComponent',
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

解释说明

functional 关键字：在 <template> 标签中添加 functional 关键字，表示这是一个函数式组件。函数式组件没有状态（即没有 this 上下文），也没有生命周期钩子。
props：通过 props 传递数据给组件。在这个例子中，我们定义了一个 message 属性，并且它是必须的。
listeners：用于处理事件。在这个例子中，handleClick 是一个自定义事件处理器，它可以在父组件中定义并通过 v-on 传递给这个函数式组件。
无状态和无实例：由于函数式组件没有实例，因此它们不能使用 data、methods 等选项。所有的逻辑都依赖于传入的 props 和 listeners。

如果需要进一步的操作或更复杂的功能，可以通过 scopedSlots 或其他方式来实现。

上一篇：vue长按事件怎么写

下一篇：vue span