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

插槽slot在vue中的使用

news 2025/7/26 17:14:57

介绍

在 Vue.js 中，插槽（slot）是一种用于实现组件内容分发的功能。通过插槽，可以让父组件在使用子组件时自定义子组件内部的内容。插槽提供了一种灵活的方式来组合和复用组件。

项目中有很多地方需要调用一个组件，比如弹窗，但是内容又不固定，有个可能弹出是表格，有的可能弹出是照片，这个决定于需要调用这个子组件的父组件，这种情况下就可以在自组建（这个弹窗中）使用slot，占坑，slot的HTML元素和内容，完全取决于使用他的父组件给他传了啥。

当内容是一个复杂的模板，可以用插槽传入！

插槽的基本概念

默认插槽：
- 最简单的插槽形式，允许父组件在子组件的指定位置插入内容。

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

具名插槽：

可以为插槽命名，父组件可以有选择地插入特定内容到子组件的不同插槽中。

<template><div><slot name="header"></slot><slot></slot> <!-- 默认插槽 --><slot name="footer"></slot></div>
</template>

作用域插槽：

允许父组件访问子组件的数据（属性），通过插槽提供的数据来渲染内容。

<template><slot :item="item"></slot>
</template>

以下是使用演示

child.vue

<template><div><slot></slot>child的内容<slot name="test"></slot><slot name="test2"></slot></div>
</template><script>
export default {name: "child"
}
</script><style scoped></style>

app.vue

<script setup>
import child from "./views/child.vue";
import {ref} from "vue";
const count = ref(100)</script><template><child><div>父亲加的默认插槽</div><template #test><div>父亲加的具名插槽</div></template><template #test2><div>父亲的作用域插槽，数据来自父亲:{{count}}</div></template></child>
</template>