给我一个vue3 使用setup 语法糖 进行父传子 的实例

当然，这是一个非常基本的例子。假设我们有一个父组件，它将传递 prop 给子组件。我们将使用 Vue 3 的新语法糖 setup 来完成操作。

首先，在父组件中，我们定义一个 prop：

<template>
  <child-component :message="hello"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      hello: 'Hello World!'
    }
  }
}
</script>

接下来，在子组件中，我们使用 setup 来引入 prop：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    return {
      message: props.message
    }
  }
}
</script>

现在，我们已经成功地将父组件的 prop 传递给了子组件，并且我们在 setup 中使用了它。