Vue3 父组件向子组件传值：使用 props 在 setup 语法糖中接收数据

在 Vue3 中，父组件可以通过 props 向子组件传递数据。子组件可以在 setup 语法糖中使用 props 选项来接收这些数据。下面是一个示例，展示了如何在父组件和子组件之间传递数据。

**父组件中**

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

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

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

**子组件中**

<script>
export default {
  props: {
    message: String
  },
  setup(props) {
    console.log(props.message) // 输出：Hello Vue!
  }
}
</script>

在这个例子中，父组件通过 `:message='hello'` 将 `hello` 变量传递给子组件的 `message` prop。在子组件的 `setup` 函数中，我们可以通过解构 `props` 对象来访问 `message` 的值。

通过这种方式，我们可以轻松地将数据从父组件传递到子组件，并使用 setup 语法糖来处理数据。