《记账项目-slot插槽》

一共有三个页面，对应三个组件。写完底部导航栏和页面的css布局后，发现三个页面的HTML的结构以及布局都是一样的。整体都可以分为两个部分，自己独特的内容区，和固定的底部导航栏，而整体的布局也相同。

如果重复在三个页面的组件里写三次布局，有问题。

应该把重复的部分放到一个组件里，谁想用这个布局和结构，就自己引用这个组件。对于每个页面的内容区不一样这个问题，可以使用组件的插槽。

Layout.vue组件

<template>
    <div class="nav-wrapper">
        <div class="content">
            <slot></slot>
        </div>

        <Nav/>
    </div>
</template>

<script lang="ts">
    export default {
        name: 'Layout'
    };
</script>

<style lang="scss" scoped>
    .nav-wrapper{
        border:1px solid black;
        display:flex;
        flex-direction: column;
        height:100vh;
    }
    .content{
        border:1px solid green;
        flex-grow:1;
        overflow:auto;
    }
</style>

这个组件里是每个页面相同的部分，不同的只有.content里的内容，所以使用 <slot></slot> 插槽，表示这个标签会被外边的内容替换掉。

对于引用Layout组件的页面，如Money.vue：

把自己的内容放在组件的标签里，就会自动把slot标签替换掉。

<template>
    <Layout>
        我是Money.vue
    </Layout>

</template>

Slot 通俗的理解就是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置）。

当然，前提是在main.ts里全局引入了Layout组件。