vue3 ts components 写法

在Vue3中，使用TypeScript编写组件需要注意一些变化。

首先，需要在`<script>`标签中添加`lang="ts"`属性，以指定使用TypeScript编写组件。

其次，需要使用`defineComponent`函数来定义组件，该函数接受一个对象作为参数，该对象包含组件的选项，如下所示：

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  setup(props) {
    // 组件逻辑
  }
});

在上面的示例中，我们使用`defineComponent`函数来定义一个名为`MyComponent`的组件。组件选项对象包括`name`、`props`和`setup`三个属性。

`name`属性用于指定组件的名称。

`props`属性用于定义组件的属性，这里我们定义了一个名为`msg`的字符串类型属性，并指定了`required`选项。

`setup`属性用于定义组件的逻辑，这里我们可以访问组件的属性`props`，并返回一个包含渲染逻辑的对象。

除此之外，Vue3中的模板语法也有所改变，需要使用`<script setup>`标签来定义组件的模板逻辑，如下所示：

<template>
  <div>{{ msg }}</div>
</template>

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

const props = defineProps({
  msg: {
    type: String as PropType<string>,
    required: true
  }
});

// 组件逻辑
</script>

在上面的示例中，我们使用`<script setup>`标签来定义组件的模板逻辑。在这里，我们首先使用`defineProps`函数来定义组件的属性，并将其存储在变量`props`中。

然后，我们就可以在模板中使用`props.msg`来访问组件的属性了。

总之，Vue3中使用TypeScript编写组件的写法与Vue2有所不同，需要注意这些变化。