vue3+ts组件传值

在 Vue3 中，可以通过 props 来实现组件传值。使用 TypeScript 时，可以通过 interface 来定义 props 的类型。

下面是一个示例代码：

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

<script lang="ts">
import { defineComponent } from 'vue';

interface Props {
  message: string;
}

export default defineComponent({
  name: 'ParentComponent',
  props: {
    message: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      parentMessage: 'Hello from parent component',
    };
  },
});
</script>

在上面的代码中，我们定义了一个 `ParentComponent` 组件，并向其子组件 `ChildComponent` 传递了一个 `message` 属性。在 `ParentComponent` 中，我们使用了 TypeScript 的 interface 来定义了 `Props` 类型，并在组件选项中使用了这个类型来定义 `props`。

在模板中，我们使用了 `v-bind` 指令来将 `parentMessage` 绑定到 `ChildComponent` 的 `message` 属性上。

希望这个示例能帮助你理解组件传值在 Vue3 中的实现方式。