vue中slot插槽的使用（默认插槽，具名插槽，作用域插槽）

在 Vue.js 中，<slot> 元素用于分发内容（也称为插槽或内容分发），它允许你在封装组件时留出一个位置，使得使用该组件的地方可以插入自定义的内容。这非常适用于像对话框、卡片等需要灵活内容的组件。

#默认插槽和具名插槽

假设封装一个aa-dialog的对话框组件。

下面是一个简单的例子，展示如何在封装的 aa-dialog 组件中使用 <slot>：

aa-dialog.vue (封装的对话框组件)

<template><div class="dialog-container"><div class="dialog-content"><!-- 默认插槽 --><slot></slot></div><div class="dialog-footer"><!-- 可选：命名插槽，例如放置按钮 --><!-- 如果使用 <aa-dialog> 组件的地方没有提供 v-slot:footer 或者 <template #footer> 内容 --><!-- 那么该位置将显示这个默认的“关闭”按钮。反之该区域会被覆盖。 --><slot name="footer"><button @click="close">关闭</button></slot></div></div>
</template><script>
export default {name: 'AaDialog',methods: {close() {// 关闭对话框逻辑}}
}
</script><style scoped>
/* 对话框样式 */
</style>

使用 aa-dialog 的地方

<template><div><aa-dialog><!-- 这里的内容会填充到 aa-dialog 的默认插槽 --><p>这里是对话框内的内容。</p><p>你可以在这里添加任意多的内容。</p><!-- 命名插槽用法 --><template v-slot:footer><button @click="confirmAction">确认</button><button @click="cancelAction">取消</button></template></aa-dialog></div>
</template><script>
import AaDialog from './components/aa-dialog.vue';export default {components: {AaDialog},methods: {confirmAction() {// 确认操作逻辑},cancelAction() {// 取消操作逻辑}}
}
</script>

在这个例子中：

• 默认插槽 (<slot></slot>) 让你可以在 <aa-dialog> 标签之间插入任何内容，这些内容将被渲染到对话框主体部分。
• 命名插槽 (<slot name="footer">) 允许你指定特定位置的内容，如对话框底部的操作按钮。

通过这种方式，可以创建高度可复用和灵活的组件，满足不同的需求。如果想要更多的控制，比如根据条件显示不同的内容，还可以结合作用域插槽（Scoped Slots）来实现。

#作用域插槽

作用域插槽（Scoped Slots）允许父组件在使用子组件时，不仅能够自定义子组件内部的结构和内容，还能访问子组件的数据。这对于创建高度可复用且灵活的组件非常有用。

下面是一个简单的例子，展示如何使用作用域插槽来传递数据给父组件：

子组件：aa-dialog.vue

<template><div class="dialog-container"><div class="dialog-content"><!-- 作用域插槽 --><slot name="content" :message="message"></slot></div><div class="dialog-footer"><slot name="footer"><button @click="close">关闭</button></slot></div></div>
</template><script>
export default {name: 'AaDialog',data() {return {message: '这是来自子组件的消息'}},methods: {close() {// 关闭对话框逻辑}}
}
</script><style scoped>
/* 对话框样式 */
</style>

父组件
 

<template><div><aa-dialog><!-- 使用作用域插槽，并接收来自子组件的数据 --><template v-slot:content="{ message }"><p>{{ message }}</p><p>这里是额外的内容。</p></template><!-- 命名插槽用法，没有使用作用域 --><template v-slot:footer><button @click="confirmAction">确认</button><button @click="cancelAction">取消</button></template></aa-dialog></div>
</template><script>
import AaDialog from './components/aa-dialog.vue';export default {components: {AaDialog},methods: {confirmAction() {// 确认操作逻辑},cancelAction() {// 取消操作逻辑}}
}
</script>

在这个例子中：

• 在 aa-dialog.vue 中，我们为 content 插槽指定了一个属性 message，它来自于子组件的数据。
• 在父组件中，当我们使用 v-slot:content 或 <template #content> 时，我们通过解构的方式获取了子组件传递过来的 message 属性，并将其显示出来。
• 如果不使用作用域插槽，父组件将无法直接访问子组件的局部状态或数据。

这种方式让父组件可以根据子组件提供的数据动态地改变内容，同时保持了组件之间的松耦合。作用域插槽是 Vue.js 提供的一种强大的工具，用于增强组件的灵活性和复用性。