0
105
VistasLa ranura se detiene después de cierto elemento secundario en Vue2
Tengo dos componentes simples de vue y quiero usar uno en la ranura predeterminada del otro. Por alguna razón, solo toma el primer elemento pero no muestra nada después de eso. Si coloco estándar antes de este primer elemento, se mostrará normal, pero si coloco si después, tampoco se mostrará.
La página:
<div id="app"> <v-app> <v-main> <gantt-chart> <div> this is visible </div> <gantt-row key="1" title="test 1"/> <div> nothing of this and beyond is shown</div> <gantt-row key="2" title="test 2"/> <gantt-row key="3" title="test 3"/> </gantt-chart> </v-main> </v-app> </div> <script type="text/javascript"> Vue.component("gantt-chart", httpVueLoader('/plugin_assets/javascripts/components/GanttChart.vue')); Vue.component("gantt-row", httpVueLoader('/plugin_assets/javascripts/components/GanttRow.vue')); var app = new Vue({ el: '#app', }) </script>diagrama de Gantt.vue:
<template> <div> <slot /> </div> </template> <script> module.exports = { props: [], name:"GanttChart", data() { return {}; }, computed: {}, methods: {}, }; </script> <style scoped></style>gantt-fila.vue:
<template> <div> {{ title }} </div> </template> <script> module.exports = { props: ["title"], name:"GanttRow", data() { return {}; }, computed: {}, methods: {}, }; </script> <style scoped></style> resultado: 
1 Respuestas
Responde la pregunta0
Una de las advertencias de las plantillas en DOM es que los elementos personalizados no pueden cerrarse automáticamente. El analizador DOM ve <gantt-row /> , pero lo trata solo como una etiqueta de apertura. Dado que la etiqueta técnicamente aún no está cerrada, envuelve los siguientes elementos como elementos secundarios. La plantilla de GanttRow.vue no tiene <slot> , por lo que los elementos anidados no serían visibles. Todo esto ocurre antes de la etapa de creación de scripts (antes de que Vue reciba el DOM para el manejo de plantillas).
Por ejemplo, ejecute el fragmento de código a continuación e inspeccione el documento resultante:
<div> this is visible </div> <gantt-row key="1" title="test 1"/> <div> nothing of this and beyond is shown</div> <gantt-row key="2" title="test 2"/> <gantt-row key="3" title="test 3"/>Notarás que se convierte en:
<div> this is visible </div> <gantt-row key="1" title="test 1"> <div> nothing of this and beyond is shown</div> <gantt-row key="2" title="test 2"> <gantt-row key="3" title="test 3"> <script type="text/javascript"></script> </gantt-row> </gantt-row> </gantt-row>Si prefiere continuar usando plantillas en DOM, use una etiqueta de cierre normal para los componentes de Vue:
<gantt-chart> <div> this is visible </div> 👇 <gantt-row key="1" title="test 1"></gantt-row> <div> everything below is also shown now </div> 👇 <gantt-row key="2" title="test 2"></gantt-row> 👇 <gantt-row key="3" title="test 3"></gantt-row> </gantt-chart>