Vue3 组合式API组件通信：使用props传递数据

在Vue3中，使用组合式API可以通过提供`setup()`函数来实现组件通信。在`setup()`函数中，可以通过`props`对象获取父组件传递的数据，并将其用于当前组件中。

示例代码如下：

<template>
  <div>
    <p>父组件传递的数据：{{ message }}</p>
    <ChildComponent :child-message='message' />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import ChildComponent from './ChildComponent.vue'

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

<template>
  <div>
    <p>子组件接收的数据：{{ childMessage }}</p>
  </div>
</template>

<script>
import { defineComponent, props } from 'vue'

export default defineComponent({
  props: {
    childMessage: {
      type: String,
      required: true
    }
  },
  setup(props) {
    return {
      childMessage: props.childMessage
    }
  }
})
</script>

在父组件中，我们通过``将`message`传递给子组件。在子组件中，我们通过`props`对象指定`childMessage`属性，并在`setup()`函数中返回该属性的值，实现了子组件获取父组件的数据。最终，子组件将父组件传递的数据渲染到页面上。