У меня есть компонент (IconInline.html), внутри которого я хотел бы импортировать и визуализировать компоненты динамически на основе переданного ему свойства (IconID).
Сейчас я делаю это вручную вот так:
{{#if IconID === "A"}}
<A />
{{elseif IconID === "B"}}
<B />
{{elseif IconID === "C"}}
<C />
{{elseif IconID === "D"}}
<D />
{{/if}}
<script>
import A from "./icons/A.html";
import B from "./icons/B.html";
import C from "./icons/C.html";
import D from "./icons/D.html";
export default {
components: { A, B, C, D }
};
</script>Есть ли способ
Невозможно импортировать все компоненты в данном каталоге, но вы можете визуализировать компоненты, соответствующие определенной опоре, используя <svelte:component>:
<svelte:component this={cmp} foo="bar" baz="bop">
<!-- contents go here -->
</svelte:component>
<script>
import A from "./icons/A.html";
import B from "./icons/B.html";
import C from "./icons/C.html";
import D from "./icons/D.html";
const components = { A, B, C, D };
export default {
computed: {
cmp: ({ IconID }) => components[IconID]
}
};
</script>
Если бы IconID был "A", это было бы эквивалентно
<A foo="bar" baz="bop">
<!-- contents go here -->
</A>