日期:2024年10月24日
作者:Commas
签名:(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释:如果您觉在这里插入代码片
得有所帮助
,帮忙点个赞
,也可以关注我
,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^
1.01365 = 37.7834;0.99365 = 0.0255
1.02365 = 1377.4083;0.98365 = 0.0006
说在最前面:本文
vue3
的示例代码,在没有另外声名的情况下,均采用<script setup>
组合式代码风格,风格统一,避免混乱,请各位新老食客放心食用哈 ^ _ ^
文章目录
- 一、前言
- 二、插槽分类
- 1、 默认插槽(Default Slot)
- 2、 具名插槽(Named Slots)
- 3、 作用域插槽(Scoped Slots)
- 三、完整示例
- 四、结语
一、前言
在 Vue3
中,插槽(Slots
) 是一种允许开发者在组件内部定义可替换内容的机制。即通过插槽,开发者在组件内部预留“空白区”,供父组件填充自定义内容。这不仅增强了组件的通用性和复用性,还实现了父组件对子组件内容的精确控制。
二、插槽分类
1、 默认插槽(Default Slot)
默认插槽(也称为匿名插槽,无名插槽)是最常见的插槽类型,用于放置普通的 HTML
内容或子组件。如果一个组件没有指定具名插槽,那么所有的内容都会被视为默认插槽的内容。
假设我们有一个子组件 ChildComponent.vue
,它包含一个默认插槽:
<template><div><h2>我是子组件的标题</h2><slot></slot> <!-- 默认插槽 --></div>
</template>
在父组件中,我们可以这样使用它:
<template><ChildComponent><p>这是通过默认插槽插入的内容</p ></ChildComponent>
</template>
渲染后的HTML结构将是:
<div><h2>我是子组件的标题</h2><p>这是通过默认插槽插入的内容</p >
</div>
2、 具名插槽(Named Slots)
允许在组件中定义多个插槽,并为每个插槽指定一个唯一的名称。父组件可以通过 v-slot
指令指定内容应该渲染到哪个具名插槽中。在 Vue3
中,也可以使用 #
来简化 v-slot
指令,像 <template #header>
这样的写法。
当我们需要在一个组件中定义多个插槽时,具名插槽就派上用场了。下面是一个包含头部和尾部具名插槽的子组件:
<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 #footer><p>这是尾部具名插槽的内容</p ></template></ChildComponent>
</template>
渲染后的HTML结构将是:
<div><header><h1>这是头部具名插槽的内容</h1></header><main><p>这是默认插槽的内容</p ></main><footer><p>这是尾部具名插槽内容</p ></footer>
</div>
3、 作用域插槽(Scoped Slots)
允许父组件访问子组件的数据。通过在子组件的插槽上定义属性,父组件可以接收这些属性,并在插槽内容中使用它们。
作用域插槽允许子组件向父组件传递数据,父组件可以根据这些数据来决定如何渲染内容。下面是一个简单的例子:
子组件 ChildComponent.vue
:
<template><div><slot :user="user"></slot> <!-- 作用域插槽 --></div>
</template><script setup>
import { ref } from 'vue';const user = ref({ name: 'Commas', age: 30 });
</script>
在父组件中,我们可以这样使用作用域插槽:
<template><ChildComponent v-slot:default="slotProps"><p>用户名: {{ slotProps.user.name }}</p ><p>年龄: {{ slotProps.user.age }}</p ></ChildComponent>
</template>
渲染后的HTML结构将是:
<div><p>用户名: Commas</p ><p>年龄: 30</p >
</div>
三、完整示例
假设我们要创建一个 可自定义的按钮组件(Button.vue
),它包含主文本和图标两个部分,如下所示:
<!-- Button.vue -->
<script setup>
import { ref } from 'vue';
</script><template><div class="button"><slot name="text">默认文本</slot><slot name="icon"><!-- 默认图标 --><i class="material-icons">add</i></slot></div>
</template>
父组件使用:
<template><Button><template #text>定制文本</template><template #icon><i class="material-icons">delete</i></template></Button>
</template>
四、结语
通过本文的探讨,我们不仅领略了 Vue3
插槽的强大功能,更深入理解了其在构建高性能、高复用性 UI
组件中的关键作用。通过默认插槽、具名插槽和作用域插槽,开发者可以定义组件的结构,并允许父组件自定义这些结构。这些机制使得Vue组件更加灵活和可重用。
参考文章:
- 《Vue 3 官方文档 - 插槽》
- 《Vue Composition API - 使用指南》
版权声明:本文为博主原创文章,如需转载,请给出:
原文链接:https://blog.csdn.net/qq_35844043/article/details/143206817