Vue3 插槽 使用笔记
Vue3 插槽 使用笔记
介绍
在 Vue 3 中，插槽（Slot）是一个非常强大的特性，它允许我们更好地组织和重用组件。通过定义插槽，子组件可以预留出由父组件控制的区域，这样父组件就可以向这些区域填充自己的内容。这增加了组件的灵活性和可复用性。
Vue 3 中插槽的种类
在 Vue 3 中，插槽主要分为以下几种类型：
默认插槽（Default Slot）
默认插槽是最基本的插槽形式，如果没有特别指定插槽名称，则所有内容都会被放置在这个插槽中。
示例：
<!-- 子组件 -->
<template><div><slot>默认内容</slot></div>
</template><!-- 父组件 -->
<template><ChildComponent><!-- 默认插槽的内容 --><p>这是从父组件传入的内容。</p></ChildComponent>
</template>
具名插槽（Named Slot）
具名插槽允许我们在子组件中定义多个插槽，并给每个插槽指定一个名称。
示例：
<!-- 子组件 -->
<template><div><header><slot name="header">默认头部内容</slot></header><main><slot>默认主体内容</slot></main><footer><slot name="footer">默认页脚内容</slot></footer></div>
</template><!-- 父组件 -->
<template><ChildComponent><template v-slot:header><h1>这是头部</h1></template><p>这是主体内容。</p><template v-slot:footer><p>这是页脚</p></template></ChildComponent>
</template>
作用域插槽（Scoped Slot）
作用域插槽允许父组件访问子组件的数据。子组件可以通过 v-slot 指令传递数据给父组件。
示例：
<!-- 子组件 -->
<template><slot :item="item"><span>{{ item.name }}</span></slot>
</template>
<script>
export default {data() {return {item: { name: '示例名称' }};}
};
</script><!-- 父组件 -->
<template><ChildComponent v-slot:item="{ item }"><p>{{ item.name }}</p></ChildComponent>
</template>
使用技巧
1. 简化具名插槽
在 Vue 3 中，你可以使用 <template> 标签来简化具名插槽的写法：
<!-- 父组件 -->
<template><ChildComponent><template #header><h1>这是头部</h1></template><p>这是主体内容。</p><template #footer><p>这是页脚</p></template></ChildComponent>
</template>
2. 动态具名插槽
插槽名称可以是动态的，这意味着你可以使用表达式来指定插槽的名称：
<!-- 父组件 -->
<template><ChildComponent><template v-slot:[dynamicSlotName]><p>动态插槽内容</p></template></ChildComponent>
</template>
<script>
export default {data() {return {dynamicSlotName: 'header'};}
};
</script>
3. 插槽绑定事件
虽然 slot 标签本身不能直接绑定事件，但通常的做法是在外部包裹一层元素，然后把事件绑定到这个元素上：
<!-- 父组件 -->
<template><ChildComponent><template v-slot:default="{ on }"><span @click="on.click">点击我</span></template></ChildComponent>
</template>
4. 插槽默认内容
当没有内容填充到插槽中时，可以通过在子组件中为 slot 标签添加默认内容来设置默认值。
总结
插槽是 Vue 3 中一个非常重要的概念，它允许我们创建更加灵活和可复用的组件。
无论是默认插槽、具名插槽还是作用域插槽，都为我们提供了丰富的手段来构建组件间的互动和内容填充。
通过合理利用插槽，我们可以编写出更加模块化且易于维护的 Vue 应用程序。