在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

只需添加slot标记即可使用仪表板组件中的slot。。。

仪表板组件

<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