11 vue3之插槽全家桶

news2024/9/20 15:25:41

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

匿名插槽

1.在子组件放置一个插槽

<template>
    <div>
       <slot></slot>
    </div>
</template>

父组件使用插槽

在父组件给这个插槽填充内容

        <Dialog>
           <template v-slot>
               <div>2132</div>
           </template>
        </Dialog>

具名插槽

具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中

    <div>
        <slot name="header"></slot>
        <slot></slot>
 
        <slot name="footer"></slot>
    </div>

父组件使用需对应名称

        <Dialog>
            <template v-slot:header>
               <div>1</div>
           </template>
           <template v-slot>
               <div>2</div>
           </template>
           <template v-slot:footer>
               <div>3</div>
           </template>
        </Dialog>

插槽简写

        <Dialog>
            <template #header>
               <div>1</div>
           </template>
           <template #default>
               <div>2</div>
           </template>
           <template #footer>
               <div>3</div>
           </template>
        </Dialog>

作用域插槽

作用域插槽由子组件暴露值出来

在子组件动态绑定参数派发给父组件的slot去使用

    <div>
        <slot name="header"></slot>
        <div>
            <div v-for="item in 100">
                <slot :data="item"></slot>
            </div>
        </div>
 
        <slot name="footer"></slot>
    </div>

通过结构方式取值

         <Dialog>
            <template #header>
                <div>1</div>
            </template>
            <template #default="{ data }">
                <div>{{ data }}</div>
            </template>
            <template #footer>
                <div>3</div>
            </template>
        </Dialog>

动态插槽

插槽可以是一个变量名

<template>
  <h2>动态插槽动态更改插槽名</h2>
  <Ten>
    <template #[name]>
      <div>我在哪儿</div>
    </template>
  </Ten>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import Ten from "./components/ten.vue";
// let name = ref("header");
let name = ref("footer");
// let name = ref("default");
</script>

子组件

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

<style lang="scss" scoped>
div {
  width: 100%;
  height: 100px;
}
.header {
  background: antiquewhite;
}
.main {
  background: aqua;
}
.footer {
  background: pink;
}
</style>

效果图：

12 vue3之异步组件&代码分包&内置组件suspense和teleport-CSDN博客文章浏览阅读23次。12 vue3之异步组件&代码分包&内置组件suspense和teleporthttps://blog.csdn.net/qq_37550440/article/details/142329387?sharetype=blogdetail&sharerId=142329387&sharerefer=PC&sharesource=qq_37550440&spm=1011.2480.3001.8118