vue3在使用 TypeScript 和组合API的前提下父组件如何给子组件传递数据

在Vue 3中，使用TypeScript和组合式API（Composition API）向子组件传递数据，可以通过props定义父组件中的属性，然后在子组件中通过defineProps函数来接收这些属性。

父组件 (ParentComponent.vue):

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

子组件 (ChildComponent.vue):

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

在这个例子中，ParentComponent 组件通过 :message="parentMessage" 将其本地变量 parentMessage 传递给 ChildComponent 组件，作为 message 属性。在 ChildComponent 组件中，使用 defineProps 接收 message 属性，并在模板中显示它。