---
url: /docs/guide/usage/linter/rules/vue/no-reserved-component-names.md
---

### 它的作用

禁止使用与 HTML / SVG 元素名称冲突的 Vue 组件名称
（以及可选的 Vue 内置组件名称）。

### 为什么这不好？

使用保留名称会悄悄遮蔽标准元素 / 内置组件，
从而在运行时产生令人困惑的行为。

### 示例

以下是此规则的**错误**代码示例：

```vue
<script>
export default {
  name: "div",
};
</script>
```

以下是此规则的**正确**代码示例：

```vue
<script>
export default {
  name: "MyComponent",
};
</script>
```

## 配置

此规则接受一个包含以下属性的配置对象：

### disallowVue3BuiltInComponents

type: `boolean`

default: `false`

禁止 Vue 3 内置组件名称（例如 `Teleport`、`Suspense`）。
注意：这也会捕获 Vue 2 的内置组件，因为 Vue 3 的集合包含它们。

### disallowVueBuiltInComponents

type: `boolean`

default: `false`

禁止 Vue 2 内置组件名称（例如 `Transition`、`KeepAlive`）。

### htmlElementCaseSensitive

type: `boolean`

default: `false`

以区分大小写的方式匹配 HTML / SVG 元素名称。当为 `false`（默认值）时，
HTML 元素的首字母大写形式（例如 `Div`）也会被报告。

## 如何使用

## 版本

此规则添加于 v1.68.0。

## 参考资料