Question

我知道必须在其他组件中渲染组件。我在这里想要做的是创建一个仪表板组件，该组件可用于包装正在调用的组件的内容。这是我的仪表板组件

<template>
    <div>
        <navbar></navbar>

        <div class="container-fluid">
            <div class="row">
                <sidebar></sidebar>

                <!-- Main -->
                <router-view></router-view>
            </div>
        </div>

        <foot></foot>
    </div>
</template>

<script>
export default {
    mounted() {
        console.log('Dashboard mounted.')
    }
}
</script>

这是主要组成部分...

<template>
    <Dashbaord>

        <main role="main" class="col-lg-10 col-md-9 ml-auto px-4">
            Main Content
        </main>

    </Dashbaord>
</template>

<script>
    import Dashbaord from "./../../components/dashboard";
    import LogIndexItem from "./LogIndexItem";

    export default {
        components: {
            Dashbaord,
            LogIndexItem
        },
    }
</script>

在我看来，这应该可以工作，但是只有仪表板才会呈现，而主要内容不会呈现。

Answer 1

只需添加插槽标签即可在仪表板组件中使用插槽...

仪表板组件

    <template>
        <div>
            <navbar></navbar>

            <div class="container-fluid">
                <div class="row">
                    <sidebar></sidebar>

                    <!-- Main -->
                    <slot name="main"></slot>
                </div>
            </div>

            <foot></foot>
        </div>
    </template>

    <script>
    export default {
        mounted() {
            console.log('Dashboard mounted.')
        }
    }
    </script>

主要组件...

<template>
    <Dashbaord>
        <template v-slot:main>
            <main role="main" class="col-lg-10 col-md-9 ml-auto px-4">
                Main Content
            </main>
        </template>
    </Dashbaord>
</template>

在这里https://vuejs.org/v2/guide/components-slots.html

在Vue.js中创建仪表板模板组件

1 个答案: