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

Question

我有两个简单的 vue 组件，想在另一个的默认插槽中使用一个。由于某种原因，它只需要第一个元素，但之后不显示任何内容。如果我把 standard 放在第一个元素之前它会正常显示，但是如果我把 if 放在后面它也不会显示。

页面：

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

甘特图-chart.vue:

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

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

<style scoped></style>

甘特图-row.vue:

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

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

<style scoped></style>

结果：

Answer 1

in-DOM 模板的警告之一是自定义元素不能 self-closing。 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>

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

Slot stops after certain child element in Vue2

html

javascript

vue.js

vuejs2

http-vue-loader