noVueReservedProps

JavaScript (and super languages)

摘要

¥Summary

规则生效日期：v2.1.2

¥Rule available since: v2.1.2
诊断类别：lint/nursery/noVueReservedProps

¥Diagnostic Category: lint/nursery/noVueReservedProps
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 error。

¥The default severity of this rule is error.
此规则属于以下域：

¥This rule belongs to the following domains:
- vue
来源：

¥Sources:
- 与 vue/no-reserved-props 相同
  
  ¥Same as vue/no-reserved-props

如何配置

¥How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueReservedProps": "error"
6
      }
7
    }
8
  }
9
}

描述

¥Description

禁止将保留名称用作 props。

¥Disallow reserved names to be used as props.

Vue 保留某些属性名称供其内部使用。将这些保留名称用作 prop 名称可能会导致 Vue 组件出现冲突和意外行为。

¥Vue reserves certain prop names for its internal use. Using these reserved names as prop names can cause conflicts and unexpected behavior in your Vue components.

此规则禁止使用以下保留属性名称：

¥This rule prevents the use of the following reserved prop names:

key - Vue 用于列表渲染和组件识别

¥key - Used by Vue for list rendering and component identification
ref - Vue 用于模板引用

¥ref - Used by Vue for template refs

示例

¥Examples

无效

¥Invalid

1
<script setup>
2
defineProps({
3
    ref: String,
4
});
5
</script>

code-block.vue:2:5 lint/nursery/noVueReservedProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ ref is a reserved attribute and cannot be used as props.
  
    1 │ defineProps({
  > 2 │     ref: String,
      │     ^^^
    3 │ });
    4 │ 
  
  ℹ Rename the prop to avoid possible conflicts.

1
import {defineComponent} from 'vue';
2

3
export default defineComponent({
4
    props: [
5
        'key',
6
    ]
7
});

code-block.js:5:9 lint/nursery/noVueReservedProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ key is a reserved attribute and cannot be used as props.
  
    3 │ export default defineComponent({
    4 │     props: [
  > 5 │         ‘key’,
      │         ^^^^^
    6 │     ]
    7 │ });
  
  ℹ Rename the prop to avoid possible conflicts.

1
<script setup lang="ts">
2
defineProps<{
3
    ref: string,
4
}>();
5
</script>

code-block.vue:2:5 lint/nursery/noVueReservedProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ ref is a reserved attribute and cannot be used as props.
  
    1 │ defineProps<{
  > 2 │     ref: string,
      │     ^^^
    3 │ }>();
    4 │ 
  
  ℹ Rename the prop to avoid possible conflicts.

1
<script>
2
export default {
3
    props: {
4
        key: String,
5
    }
6
};
7
</script>

code-block.vue:3:9 lint/nursery/noVueReservedProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ key is a reserved attribute and cannot be used as props.
  
    1 │ export default {
    2 │     props: {
  > 3 │         key: String,
      │         ^^^
    4 │     }
    5 │ };
  
  ℹ Rename the prop to avoid possible conflicts.

有效

¥Valid

1
import {defineComponent} from 'vue';
2

3
export default defineComponent({
4
    props: ['foo']
5
});

1
<script setup>
2
defineProps({ foo: String });
3
</script>

1
<script setup lang="ts">
2
defineProps<{
3
    foo: string,
4
    bar: string,
5
}>();
6
</script>

1
<script>
2
export default {
3
    props: {
4
        foo: String,
5
        bar: String,
6
    }
7
};
8
</script>

noVueReservedProps

摘要

如何配置

描述

示例

无效

有效

相关链接