vue3+typescript开发公共组件

在Vue 3中创建一个使用TypeScript的公共组件可以通过以下步骤完成：

1. 创建组件：在项目中创建一个新的文件夹用于存放组件。
2. 定义组件接口：在组件文件夹内创建一个.ts文件用于定义组件的Props接口。
3. 实现组件：创建一个.vue文件来实现组件的模板和逻辑。
4. 导出组件：在入口文件（例如main.ts）中导入并注册组件。

以下是一个简单的示例：

// MyButton.vue
<template>
  <button :class="`btn-${type}`" @click="handleClick">{{ label }}</button>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  name: 'MyButton',
  props: {
    label: String,
    type: {
      type: String,
      default: 'primary'
    }
  },
  setup(props, { emit }) {
    const handleClick = () => {
      emit('click');
    };
 
    return {
      handleClick
    };
  }
});
</script>
 
<style scoped>
.btn-primary {
  background-color: blue;
  color: white;
}
</style>

// MyButton.ts
export interface MyButtonProps {
  label?: string;
  type?: string;
}

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import MyButton from './components/MyButton.vue';
 
const app = createApp(App);
app.component('MyButton', MyButton);
app.mount('#app');

在这个例子中，我们创建了一个带有label和type属性的MyButton组件，并且定义了一个简单的click事件处理函数。我们使用TypeScript定义了MyButtonProps接口来约束Props的类型。最后，在入口文件main.ts中注册了该组件，使其可在整个应用中使用。