Vue3 父组件向子组件传值：使用 props 实现数据传递

在 Vue3 中，父组件向子组件传值可以通过 props 进行传递，子组件可以在 props 中声明需要接收的属性。

在子组件中，可以通过 props 选项来声明需要接收的属性，例如：

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

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

在父组件中，可以通过传递属性的方式来向子组件传值，例如：

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

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

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

在子组件中，通过 props 选项声明了需要接收 message 属性，在父组件中，通过传递属性的方式向子组件传递了 hello 的值，这样就完成了父组件向子组件传值的过程。