Vue组合式API中如何限制组件仅接收已声明属性？

问题描述 #

允许Vue组件接收任意属性会引发诸多问题：

• 可随意给组件添加未声明的属性（如示例中的fake-attr="some"）
• 输入错误（例如误将逗号作为属性）时，运行时错误提示模糊，需额外调试才能定位问题
• 重构属性名称后，旧属性会被当作合法的额外属性使用，不会触发任何报错

示例代码 #

父组件：

<script setup lang="ts">
import { ref } from 'vue';
import Checkbox from './Checkbox.vue';
const value = ref(false);
</script>
<template>
  <div>{{ value }}</div>
  <Checkbox :value @change="value = !value" fake-attr="some" />
</template>

Checkbox子组件：

<script setup lang="ts">
defineProps<{
  value: boolean
}>();
const $emit = defineEmits<{
  check: [boolean]
}>();
</script>
<template>
  <div>
    <input type="checkbox" @change="e => $emit('check')">
  </div>
</template>

输入错误时出现的模糊报错：

Failed to execute 'setAttribute' on 'Element': ',' is not a valid attribute name.

解决方案 #

1. 运行时校验未声明属性 #

在<script setup>中，结合useAttrs()获取所有传入的属性，手动校验是否存在未声明的属性，若有则抛出明确错误：

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

// 明确声明允许的属性
const props = defineProps<{
  value: boolean
}>();
const $emit = defineEmits<{
  check: [boolean]
}>();

const attrs = useAttrs();
// 筛选出未声明的属性
const allowedPropKeys = Object.keys(props);
const extraAttrs = Object.keys(attrs).filter(key => !allowedPropKeys.includes(key));

// 存在未声明属性时抛出错误
if (extraAttrs.length > 0) {
  throw new Error(`当前组件不支持以下未声明的属性：${extraAttrs.join(', ')}`);
}
</script>
<template>
  <div>
    <input type="checkbox" @change="e => $emit('check')">
  </div>
</template>

同时可设置inheritAttrs: false避免未声明属性自动绑定到根元素，在<script setup>中需通过单独的<script>标签配置：

<script>
export default {
  inheritAttrs: false
};
</script>

<script setup lang="ts">
// 其余代码同上
</script>

2. 编译时类型检查（TypeScript） #

在TypeScript项目中，确保tsconfig.json开启strict: true，Vue的类型系统会自动校验组件传入的属性是否匹配defineProps声明的类型。IDE会直接对未声明属性、拼写错误给出编译警告，无需运行代码就能发现问题。

3. ESLint规则增强检查 #

启用eslint-plugin-vue的vue/no-unused-properties规则，配合TypeScript类型检查，能在开发阶段更早拦截未声明属性和属性拼写错误，进一步提升代码质量。

内容的提问来源于stack exchange，提问作者Alexander Nenashev