vue+typescript自定义组件

Vue中使用TypeScript定义自定义组件的步骤如下：

1. 创建一个Vue组件的TypeScript文件，例如`CustomComponent.ts`。
2. 在文件中导入Vue和定义组件所需的类型。

   import Vue, { ComponentOptions } from 'vue';

   // 定义组件props的类型
   interface Props {
     // props属性
   }

   // 定义组件实例的类型
   interface CustomComponent extends Vue {
     // 组件内部数据和方法
   }

3. 定义组件的选项，并将其赋给`componentOptions`变量。

   const componentOptions: ComponentOptions<CustomComponent> = {
     // 组件选项
     props: ['prop1', 'prop2'],
     data() {
       return {
         // 组件内部数据
       };
     },
     methods: {
       // 组件内部方法
     },
     template: `
       <div>
         <!-- 组件模板 -->
       </div>
     `,
   };

4. 创建Vue组件并导出。

   const CustomComponent = Vue.extend(componentOptions);
   export default CustomComponent;

5. 在其他Vue文件中导入自定义组件并使用。

   <template>
     <CustomComponent :prop1="value1" :prop2="value2" />
   </template>

   <script lang="ts">
   import { Component, Vue } from 'vue-property-decorator';
   import CustomComponent from './CustomComponent';

   @Component({
     components: {
       CustomComponent,
     },
   })
   export default class MyComponent extends Vue {
     // 组件逻辑
   }
   </script>

这样，你就可以在Vue项目中使用TypeScript定义自己的组件了。记得在项目中安装相应的依赖，例如`vue`、`vue-property-decorator`等。