A scenario

There are three VUE components and they all have the same layout. The layout is shown below, with navigation bars at the bottom, and the content above varies by component.Since all three components have the same layout. So to avoid repeating the Layout styles of these three components, encapsulate them as layout.vue components.

The second code

//Layout.vue
<template>
    <div class="nav-wrapper">
        <div class="content">
            <slot/>// Slot is used here</div>
        <Nav/>
    </div>
</template>

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

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

Each of the three components refers to the Layout component, and the code for one of them is shown below.

//Money.vue
<template>
<Layout>Money //Money component's own content</Layout>
</template>

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

<style lang="scss" scoped>

</style>
Copy the code

Iii. Summary of Usage

  1. A Layout component does not know who will reference it or what content will be placed in its Content div, so slots in a Layout component are intended to receive content that will be placed there in the future.
  2. The Money component is rendered with a Layout tag, and the Money component is rendered with a Slot tag. When the Money component is rendered with a Slot tag, the Money component is rendered with a Layout tag.