Vue3 + TS组件封装指南

在 Vue 3 + TypeScript 中封装组件时，需要注意以下几点：

1. Props 定义

使用 defineProps 或 PropType 定义组件的 props，并为其添加类型。

示例：

import { defineComponent, PropType } from 'vue';export default defineComponent({props: {title: {type: String as PropType<string>,required: true,},count: {type: Number as PropType<number>,default: 0,},},
});

2. Emit 事件

使用 defineEmits 定义组件发出的事件，并为其添加类型。

示例：

import { defineComponent } from 'vue';export default defineComponent({emits: ['update:count'],setup(props, { emit }) {const increment = () => {emit('update:count', props.count + 1);};return {increment,};},
});

3. Slots 插槽

使用 slots 定义插槽，并通过 v-slot 或 # 语法使用。

示例：

<template><div><slot name="header"></slot><slot></slot><slot name="footer"></slot></div>
</template>

4. Scoped Slots 作用域插槽

通过 v-slot 或 # 语法传递数据给插槽。

示例：

<template><div><slot :item="item"></slot></div>
</template><script lang="ts">
import { defineComponent } from 'vue';export default defineComponent({setup() {const item = { name: 'Vue 3' };return {item,};},
});
</script>

5. Provide/Inject

使用 provide 和 inject 实现跨组件数据传递，并为其添加类型。

示例：

import { defineComponent, provide, inject } from 'vue';const key = Symbol();export default defineComponent({setup() {provide(key, 'some value');},
});export const useInjectedValue = () => inject(key);

6. Composable 函数

将可复用的逻辑提取到 composable 函数中，并为其添加类型。

示例：

import { ref, computed } from 'vue';export function useCounter() {const count = ref(0);const double = computed(() => count.value * 2);function increment() {count.value++;}return {count,double,increment,};
}

7. 类型推断

利用 TypeScript 的类型推断功能，确保组件内部逻辑的类型安全。

示例：

import { defineComponent, ref } from 'vue';export default defineComponent({setup() {const count = ref(0); // TypeScript 会自动推断 count 为 Ref<number>return {count,};},
});

8. 组件引用

使用 ref 引用子组件，并为其添加类型。

示例：

import { defineComponent, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';export default defineComponent({components: {ChildComponent,},setup() {const childRef = ref<InstanceType<typeof ChildComponent>>();return {childRef,};},
});

9. 样式隔离

使用 scoped 样式或 CSS Modules 确保样式隔离。

示例：

<template><div class="my-component"><p>Hello World</p></div>
</template><style scoped>
.my-component {color: red;
}
</style>

10. 单元测试

使用 Jest 或 Vitest 编写单元测试，确保组件功能正确。

示例：

import { mount } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';test('MyComponent', () => {const wrapper = mount(MyComponent, {props: {title: 'Hello',},});expect(wrapper.text()).toContain('Hello');
});