vue3 ts组件传值

在 Vue3 中，使用 TypeScript 编写组件，可以通过 props 进行组件之间的传值。

首先，在组件中声明 props：

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  props: {
    message: {
      type: String,
      required: true,
    },
  },
});

然后，在父组件中使用该组件时，可以通过 v-bind 指令将数据传入：

<template>
  <my-component :message="myMessage" />
</template>

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

export default defineComponent({
  name: 'MyParentComponent',
  components: {
    MyComponent,
  },
  data() {
    return {
      myMessage: 'Hello, World!',
    };
  },
});
</script>

在上面的例子中，我们将 myMessage 数据通过 v-bind 指令传递给了 MyComponent 组件的 message 属性。

当然，在 TypeScript 中，我们还可以对 props 进行类型检查和默认值的设置。例如：

interface Props {
  message: string;
  count: number;
}

export default defineComponent({
  name: 'MyComponent',
  props: {
    message: {
      type: String,
      required: true,
    },
    count: {
      type: Number,
      default: 0,
    },
  },
});

这里我们使用了一个接口 Props 来定义 props 的类型，并为 count 设置了默认值。