代码规范

组件开发

*.vue文件的开发统一使用setup语法和组合式API进行开发，详见。

组件类型定义

组件类型定义统一在packages/components/<component-name>/src/<component-name>.ts文件中完成，方便后续统一导出。

props/emit 声明

统一使用defineProps和defineEmits宏进行声明，推荐通过泛型参数进行基于类型的声明。

<script setup lang="ts">
const props = defineProps<{
  foo: string;
  bar?: number;
}>();

const emit = defineEmits<{
  change: [id: number];
  update: [value: string];
}>();
</script>

更多用法请查阅官方文档。

双向绑定

统一使用defineModel宏进行数据的双向绑定。

<!-- Child.vue -->
<script setup lang="ts">
const model = defineModel();

function update() {
  model.value++;
}
</script>

<template>
  <div>Parent bound v-model is: {{ model }}</div>
  <button @click="update">Increment</button>
</template>

父组件可以用 v-model 绑定一个值：

<!-- Parent.vue -->
<Child v-model="countModel" />

更多用法请查阅官方文档。