Each slot passed to a component should have unique name
- VUE_DUPLICATE_SLOT
- Error
- Medium
- vue
This rule applies when multiple slots with the same name are passed to a component as follows:
- Two
<template>slots of a component havev-slotdirectives with the same argument. In this case, the previous<template>is ignored. See Example 1 below. v-slothaving fixed argument is used together withv-foron the same<template>. In this case, only the last iteration content is recognized as the slot. See Example 2 below.- Child nodes not belonging to a
<template>slot exist when the parent component has an explicit<template>for the default slot. Those extraneous nodes are ignored. See Example 3 below.
Noncompliant Code Example
View with compliant examples side by side<template>
<!-- Example 1 -->
<MyComponent>
<template v-slot:foo>
Foo slot
</template>
<template v-slot:foo> <!-- VUE_DUPLICATE_SLOT alarm -->
Bar slot
</template>
</MyComponent>
<!-- Example 2 -->
<MyComponent>
<template v-for="item in list" v-slot:foo> <!-- VUE_DUPLICATE_SLOT alarm -->
<div :key="item.id">
{{ item.name }}
</div>
</template>
</MyComponent>
<!-- Example 3 -->
<MyComponent>
<template v-slot:default>
<div>Default slot content 1</div>
</template>
<div>Default slot content 2</div> <!-- VUE_DUPLICATE_SLOT alarm -->
</MyComponent>
</template>Compliant Code Example
View with noncompliant examples side by side<template>
<!-- Example 1 -->
<MyComponent>
<template v-slot:foo>
Foo slot
</template>
<template v-slot:bar>
Bar slot
</template>
</MyComponent>
<!-- Example 2 -->
<MyComponent>
<template v-slot:foo>
<div v-for="item in list" :key="item.id">
{{ item.name }}
</div>
</template>
</MyComponent>
<!-- Example 3 -->
<MyComponent>
<template v-slot:default>
<div>Default slot content 1</div>
<div>Default slot content 2</div>
</template>
</MyComponent>
</template>Version
This rule was introduced in DeepScan 1.39.0.