时间戳

首页 > 解决方案 > vue中可以不嵌套单个文件组件标签吗

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

问题描述

我正在尝试嵌套这些单个文件组件，并且只显示行。我没有正确理解这一点吗？

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

列.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 中显示的行。

标签： vue.js

解决方案

您没有插槽，<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>s：

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>

推荐阅读