Tengo un componente contenedor ( Wrapper.vue ).
<component v-for="c of comps" :key="c.componentName" :is="c.componentName"> <slot :name="c.componentName"> </slot> </component> const comps = [ { componentName: "Child1", }, { componentName: "Child2", } ];Child1.vue es algo como a continuación
<template> <div class="hello"> <slot name="top">Child1 slot top text</slot> </div> </template>Child2.vue es algo como a continuación
<template> <div class="hello"> <slot name="top">Child2 slot top text</slot> </div> </template>Quiero usar el contenedor como se muestra a continuación en App.vue
<Wrapper> <template slot="slot1"> <template slot="top">Inner Content1</template> </template> <template slot="slot2"> <template slot="top">Inner Content2</template> </template> </Wrapper>Enlace de CodeSandbox: - https://codesandbox.io/s/mystifying-burnell-ir8un
Muestra texto predeterminado de Child1 y Child2, no de App.vue. ¿Qué se debe hacer para solucionarlo?
Cambié algo de código y este es el resultado. Los cambios que hice:
<template> dentro de App.vue.https://codesandbox.io/s/lucid-smoke-uzgn7?file=/src/App.vue