vite+ts+vue3 知识点（插槽slot）

匿名插槽

子组件

<template>
    <div>
        <div class="content">
            <header>
                // 插槽站位符
                <slot></slot>
            </header>
            <main></main>
            <footer></footer>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">
.content {
    display: flex;

    header {
        flex: 1;
        height: 500px;
        background-color: skyblue;
    }

    main {
        flex: 1;
        height: 500px;
        background-color: pink;
    }

    footer {
        flex: 1;
        height: 500px;
        background-color: orange;
    }
}
</style>

父组件

<template>
  <div>
    <slotTest>
      // 插槽模板
      <template #default>
        <div>
          header的插槽
        </div>
      </template>
    </slotTest>
  </div>
</template>

<script setup lang="ts">
import slotTest from '@/components/slotTest.vue'
</script>

<style scoped lang="less">

</style>

具名插槽

子组件

<template>
    <div>
        <div class="content">
            <header></header>
            <main>
                <slot name="mainSlot"></slot>
            </main>
            <footer></footer>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">
.content {
    display: flex;

    header {
        flex: 1;
        height: 500px;
        background-color: skyblue;
    }

    main {
        flex: 1;
        height: 500px;
        background-color: pink;
    }

    footer {
        flex: 1;
        height: 500px;
        background-color: orange;
    }
}
</style>

父组件

<template>
  <div>
    <slotTest>
      <template #mainSlot>
        <div>
          main的插槽
        </div>
      </template>
    </slotTest>
  </div>
</template>

<script setup lang="ts">
import slotTest from '@/components/slotTest.vue'
</script>

<style scoped lang="less">

</style>

插槽作用域

插槽模板传值

<template>
    <div>
        <div class="content">
            <header></header>
            <main></main>
            <footer>
                <slot name="dataSlot" :index="0" ></slot>
            </footer>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">
.content {
    display: flex;

    header {
        flex: 1;
        height: 500px;
        background-color: skyblue;
    }

    main {
        flex: 1;
        height: 500px;
        background-color: pink;
    }

    footer {
        flex: 1;
        height: 500px;
        background-color: orange;
    }
}
</style>

父组件接收值

<template>
  <div>
    <slotTest>
      <template #dataSlot="{ index }">
        <div>
          footer插槽接收值{{ index }}
        </div>
      </template>
    </slotTest>
  </div>
</template>

<script setup lang="ts">
import slotTest from '@/components/slotTest.vue'
</script>

<style scoped lang="less">

</style>

动态插槽

子组件设置好插槽模板

<template>
    <div>
        <div class="content">
            <header>
                <slot name="header"></slot>
            </header>
            <main>
                <slot name="main"></slot>
            </main>
            <footer>
                <slot name="footer"></slot>
            </footer>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">
.content {
    width: 100vw;
    display: flex;

    header {
        flex: 1;
        height: 500px;
        background-color: skyblue;
    }

    main {
        flex: 1;
        height: 500px;
        background-color: pink;
    }

    footer {
        flex: 1;
        height: 500px;
        background-color: orange;
    }
}
</style>

父组件动态插入

<template>
  <div>
    <A>
      <template #[slotName]>
        <div>
          头在{{ slotName }}
        </div>
      </template>
    </A>
  </div>
</template>

<script setup lang="ts">
import A from './components/A.vue'
const slotName = 'header'
</script>

<style scoped lang="less">
</style>