在Vue2中的某些子元素之后插槽停止

Question

我有两个简单的vue组件，并希望在另一个的默认插槽中使用一个。出于某种原因，它只使用第一个元素，但在此之后没有显示任何内容。如果我把标准放在这个第一个元素之前，它就会显示正常，但是如果我把它放在后面，也不会显示出来。

这一页：

<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> 

甘特-图表.：

<template>
    <div>
      <slot />
    </div>
</template>

<script>
module.exports = {
  props: [],
  name:"GanttChart",
  data() {
    return {};
  },
  computed: {},
  methods: {},
};
</script>

<style scoped></style>

甘特-罗。

<template>
    <div>
      {{ title }}
    </div>
</template>

<script>
module.exports = {
  props: ["title"],
  name:"GanttRow",
  data() {
    return {};
  },
  computed: {},
  methods: {},
};
</script>

<style scoped></style>

结果：

​

Answer 1

DOM模板的一个注意事项是，自定义元素不能自动关闭。DOM解析器可以看到<gantt-row />，但只将其视为开始标记。由于该标记在技术上尚未关闭，因此它将以下元素包装为子元素。GanttRow.vue的模板没有<slot>，所以嵌套的元素是不可见的，所有这些都发生在脚本阶段之前(在Vue接收DOM进行模板处理之前)。

例如，运行下面的代码片段，并检查生成的文档：

​

<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"/>

​

你会注意到这会变成：

<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>

如果您希望继续使用in-DOM模板，请为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>