vue3组件父传子props怎么用

Vue3中的父传子Props主要是通过props这个特性来进行数据的单向传递。父组件可以在其`<template>`或`<script setup>`部分定义一些属性，并将它们作为props传递给子组件。以下是一个基本的示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="parentMessage" />
  </div>
</template>

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

const parentMessage = "这是父组件传递给子组件的消息";
</script>

<!-- 子组件 -->
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: {
    // 定义接收到的prop名称和默认值（可选）
    message: String,
  },
  // 在这里可以访问到并处理接收到的prop
  setup(props) {
    console.log('子组件接收到的message:', props.message);
  }
};
</script>

在这个例子中，父组件通过`:message="parentMessage"`将`parentMessage`的值绑定到子组件的`message` prop上。子组件在`setup`钩子中可以获取并使用这个props。