slot name type will lose in a specific dom structure.
Vue - Official version
2.0.19
Link to minimal reproduction
https://play.vuejs.org/#eNqtVl9P2zAQ/yq3TBog0fZhe8pKp63ioXvYEER7ITyE5FJCHTuynRaE+O4723GShhSBtr60vjvf/fy7f30KvlfVdFtjEAbzD5MJRKi0OcNksoj5XGNZsUQj/Qb6zLNi2/ykw1KUlT8AhDq5ZThJBatLTl88L9ZncWClSytcWlkc+DsLaG/b2OpO1CwDLjSglEJCwjPAB408U3D7CCsDzgHzQVuA8FGT8ooJ3dfOBvjbUL17LFHa4VOLRGW9O/1Q85l5radh5nkYRLAilcqi0qBQ1xWwhFsWVBxYi6KshNRgnEEuRQlHU+vZcH5kDbhGmScp0nOH1M0jOCNSHhfw5IBUUlQhbPBR5BDBJ1BaFnztdIIvWZFuvoVwLMUuhOgUXG5IQj7ohIz9SViNXlDwDB/owOvyFuUJnC2g5hsudtx4fB6iM8locAiZoVxlYQPgq5P6jAzEEjPEcsVzEfr7znZgZwMCrIXI1OuWJCw0w/H7qdgStjJZk77zUldMJFkjHrtWySJtVe37qazp1S9qOhxLlmVocX1DObu+ccXiSsMWQnBKReG6ZHqvBKcGtODiIKVyKBjK35UuKFwctI+Pg4QxsftpZVrWeOrl6R2mmxH5vXowsji4kKhQbjEOWp1O5Bq1U59f/aJG6ylLkdWMrF9RXqKi5xqMzuxHzTOC3bOzaFe24onESJ2bXlb+UQaoJdbaxwF1gOmEQ0/v4H6efmkS8kws+u4xE+xQ68EaOVJC6RjtNyIV/l4vNuemHWP+jnY83Iz/txXp3TGp84LjBYVUcxv9bTUZUT2Sh8XxCQ33rhxfTnqqVk/NdpILScwVZELAXkZqGO2N14+pkBLT4bC2k1fRRICQJyU2PqeGOMrRrBm47/DVTXHiI6mZ9gvnUuz2UJmxfDju6MZ4NxjaCcRVkXv3TdYJR7cvGntnikz1F9PbMRpv4/Dc3jywInvgyKWnjNCNbcneLYOzM/8nUrt12lSX+ZPRqamdew047GhCerBie/9MHCgHwDO/ByF4/gvLZtH3
Steps to reproduce
<anyComp v-for="item in tableColumnConfig">
<!-- #correct -->
<!-- <slot :name="item.prop" /> -->
<!-- #correct -->
<!-- <template #default="tableRow">
<slot :name="item.prop" />
</template> -->
<!-- #correct -->
<!-- <div v-if="item.onClick"></div>
<div v-else>
<slot :name="item.prop" />
</div> -->
<!-- #error, lose type -->
<template v-if="item" #default></template>
<template v-else #default>
<slot :name="item.prop" />
</template>
</anyComp>
<template>
<Comp :table-column-config="tableColumnConfig">
<!-- should not error and extends by ITest -->
<template #testSlot>
</template>
</Comp>
</template>
<script setup lang="ts">
import Comp from './Comp.vue'
interface ITableColumnConfig<T = any> {
prop: keyof T & string
onClick?: (row: T, column?: any, cellValue?: any, index?: number) => unknown
}
interface ITest {
orderId: string;
testSlot: string;
redeemInfo: {
test: string;
}
goods: {
test: string;
title: string;
}
coverImage: {
uploadImage: string;
}
price: string
}
const tableColumnConfig: ITableColumnConfig<ITest>[] = []
</script>
I think the key error point is "slot in template v-if v-else with #default"
I think this can be solved by https://github.com/vuejs/core/pull/11150.
Currently, the Vue compiler removes the <slot v-else ... element in Comp.vue, so that Volar can't analyze it.
vuejs/core#11150
Really appreciate for your response! Next time, I will first check the compilation result to identify the issue