在 Vue.js 中創建儀表板模板組件

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://v2.vuejs.org/v2/guide/components-slots.html