vue.js - vue中可以不嵌套单文件组件标签吗

Question

我试图嵌套这些单个文件组件，但只显示该行。我没有理解正确吗？

<template>
    <div>
        <row>
            <column>
                <numberModule>
            </column>
        </row>
    </div>
</template>
<script>
    import row from '../../containers/row.vue'
    import column from '../../containers/column.vue'
    import numberModule from '../../components/numberModuleTemplate.vue'

    const sales = {
        components: {
            row,
            column,
            numberModule
        },
    };
    export default sales;
</script>

行.vue

<template>
    <row v-bind:class="classes"></row>
</template>

<script>
    const row = {
        data: function() {
            return {
                classes: ["row","row-eq-height-lg"]
            }
        }
    };

    export default row;
</script>

column.vue

<template>
   <column v-bind:class="classes"></column>
</template>

<script>
    const column = {
        data: function() {
            return {
                classes: ["col-lg-3"]
            }
        }
    };

    export default column;
</script>

numbersModuleTemplate.vue

<template>
    <div v-bind:id="id" v-bind:class="moduleClasses" v-cloak>
        <div class="content">
            <div class="svg-container">
                <twoPeopleOutline />
            </div>
        </div>
    </div>
</template>
<script>
    import twoPeopleOutline from "../../Views/Shared/SVGs/twoPeopleOutline.svg";

    const numberModule = {
        data: function () {
            return {
                title: "Meetings",
                id: "meetings-module",
            }
        },
        components: {
            twoPeopleOutline
        },
    };

    export default numberModule;
</script>

也许我错过了一些我看不到的东西。如果我理解正确，您应该能够嵌套这些组件，但是，我只能看到在 dom 中显示的行。

Answer 1

你没有slots在你的<row>所以没有输出原始内容。尝试:

<template>
    <row v-bind:class="classes">
        <slot></slot>
    </row>
</template>

<script>
  const row = {
    data: function() {
      return {
        classes: ["row", "row-eq-height-lg"]
      }
    }
  };

  export default row;
</script>

您的 <column> 也是如此组件以及您希望放置在元素标签中的原始内容的任何其他组件。

考虑这个证明需要 <slot> 的简化示例如下:

const foo = {
  template: "<div></div>"
}
const bar = {
  template: "<div><slot></slot></div>"
}

const app = new Vue({
  el: "#app",
  components: {
    foo,
    bar
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>

<div id="app">
  <!-- Foo has no <slot> in its template -->
  <foo>Foo</foo>
  <!-- Bar does though -->
  <bar>Bar</bar>
</div>