vue3 父传子

父页面传值

<template>
  <div>
    <child-component :parentData="message" />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
const message = ref('Hello from parent!');
</script>

子页面接收

<template>
  <div>
    {{ parentData }}
  </div>
</template>
 
<script setup>
import { defineProps } from 'vue';
 
const props = defineProps({
  parentData: String
});
</script>