写一个vue的函数组件

当然，这里我为您提供一个简单的 Vue 函数组件示例代码：

<template>
  <div class="hello-world">
    <h1>{{ greeting }}</h1>
    <button @click="updateGreeting">Say Hello</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    name: {
      type: String,
      default: 'World'
    }
  },
  data() {
    return {
      greeting: `Hello, ${this.name}!`
    }
  },
  methods: {
    updateGreeting() {
      this.greeting = `Hi, ${this.name}!`
    }
  }
}
</script>

此示例代码展示了一个名为 `HelloWorld` 的函数式 Vue 组件，该组件接受一个 `name` 属性作为输入。组件中包含一个 `greeting` 数据属性和一个 `updateGreeting` 方法。当用户点击按钮时，`greeting` 属性的值将从“Hello，World！”更改为“Hi，World！”。

请注意，Vue 3 已经支持函数式组件，而 Vue 2 中需要使用 Vue 函数 API 和 Suspense 才能实现函数式组件。