1.父组件通过 props 向子组件传值
父组件通过 :message="parentMessage" （前面的message是自定义的名字，可以在子组件使用defindeprops接收，后面的parentmessage是要传递的内容）向子组件传递数据，子组件通过 defineProps 来接收数据。

父组件

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const parentMessage = ref('Hello from parent!');
</script>

子组件

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
 
<script setup>
defineProps({
  message: String
});