vue3父组件给子组件传值，并在子组件接受

1、在父组件中定义数据： 在父组件中定义需要传递给子组件的数据。

<template><div><ChildComponent :message="parentMessage" /></div>
</template><script>
import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';export default defineComponent({components: {ChildComponent,},data() {return {parentMessage: 'Hello from parent!',};},
});
</script>

2、在子组件中接收props： 在子组件中使用props来接收父组件传递的数据。

方法一：

<template><div><p>{{ message }}</p></div>
</template><script>
import { defineComponent, PropType } from 'vue';export default defineComponent({props: {message: {type: String as PropType<string>,required: true,},},
});
</script>

方法二：

在这个修改后的代码中，我们使用了 defineProps 来定义 props，而不是在 defineComponent 中。这是因为在 <script setup> 中，Vue 3 已经隐式地为你创建了一个组件。

<script setup lang="ts">
import { defineProps, PropType } from 'vue';const props = defineProps({message: {type: String as PropType<string>,required: true,},
});
</script>