当前位置：首页 > news >正文

11 vue3之插槽全家桶

news 2025/7/17 9:38:13

插槽就是子组件中的提供给父组件使用的一个占位符，用<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