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

建网站京公网安昆明房产信息网

news 2025/10/25 6:06:05

建网站京公网安,昆明房产信息网,安徽网页设计,wordpress setup-config.php空白目录第一章前言第二章 slot的基本原理及使用 2.1 原理 2.2 分类 2.3 使用 2.3.1 默认插槽 2.3.2 具名插槽 *2.3.3 作用域插槽第三章插槽的实际应用场景第四章插槽的性能优化第五章扩展第六章总结第一章前言在 Vue 开发中，插槽&#xff08…

第一章前言

第二章 slot的基本原理及使用

2.1 原理

2.2 分类

2.3 使用

2.3.1 默认插槽

2.3.2 具名插槽

*2.3.3 作用域插槽

第三章插槽的实际应用场景

第四章插槽的性能优化

第五章扩展

第六章总结

第一章前言

在 Vue 开发中，插槽（slot）是一种强大的内容分发机制，它允许父组件向子组件传递内容，使得组件更加灵活和可复用。小编用该文章深入探讨 Vue 插槽的原理、使用方法、应用场景以及一些扩展技巧。也希望能帮住到大家，在组件封装、插槽使用中有更好的理解和运用。

第二章 slot的基本原理及使用

2.1 原理

插槽的核心思想是通过 <slot> 标签在子组件中定义一个"占位符"，父组件可以在这些占位符中插入任意内容。在编译阶段vue 会识别 <slot> 标签，并将其转换为虚拟节点（VNode）；在渲染阶段vue 会将父组件传递的内容插入到对应的插槽位置。

2.2 分类

默认插槽
具名插槽
作用域插槽

2.3 使用

2.3.1 默认插槽

默认插槽：默认插槽是最简单的插槽形式，直接将父组件的内容插入到子组件的默认位置。如果父组件没有传递内容，子组件会显示 <slot> 标签内的默认内容。
示例：

-- 子组件：ChildComponent

<template><div><slot>默认内容</slot></div>
</template>

-- 父组件

<template><ChildComponent><p>这是父组件传递的内容</p></ChildComponent>
</template>

解释：这里`<p>这是父组件传递的内容</p>`会渲染到页面上，在子组件slot的位置上；如果父组件使用子组件ChildComponent时没有传入内容，则会渲染子组件的`默认内容`到页面上

2.3.2 具名插槽

具名插槽：具名插槽允许在一个组件中定义多个插槽，并通过 name 属性区分它们。父组件可以使用 v-slot 指令（或简写 #）来指定内容插入到哪个插槽。
示例：

-- 子组件

<template><div><header><slot name="header">默认头部内容</slot></header><main><slot>默认主体内容</slot></main><footer><slot name="footer">默认底部内容</slot></footer></div>
</template>

-- 父组件

<template><ChildComponent><template #header><h1>这是头部内容</h1></template><p>这是主体内容</p><template #footer><p>这是底部内容</p></template></ChildComponent>
</template>

解释：与上面的默认插槽类似，但是有区别的是插槽有了区分：父组件的插槽名为header只会在子组件`<slot name="header"></slot>`展示；父组件的插槽名为footer只会在子组件`<slot name="footer"></slot>`展示

*2.3.3 作用域插槽

作用域插槽：作用域插槽允许子组件向插槽传递数据，使父组件可以在插槽内容中访问这些数据。子组件通过 <slot> 标签的属性将数据传递给插槽，父组件通过 v-slot 指令接收并使用这些数据。
示例1：

-- 子组件

<template><div><slot :message="message"></slot></div>
</template><script setup>import { ref } from 'vue';const message = ref('这是子组件的数据');
</script>

-- 父组件

<template><ChildComponent><!-- 这种方法已经把message解构出来 --><template #default="{ message }"><p>{{ message }}</p></template></ChildComponent>
</template>

解释：利用这种方式，子组件只需要放数据在插槽内，父组件利用#default="{ message }"接收子组件的数据，然后渲染到对应的位置即可。

示例2：

-- 子组件

<template><div><h3>{{title}}分类</h3><!-- :games="games"传数据给父组件使用： :定义数据名="需要传的数据名" --><slot :games="games">我是默认值</slot></div>
</template><!-- 数据在子组件中 -->
<script>export default {name:'Category',props:['title'],data() {return {games:['王者','超级玛丽','吃鸡','部落冲突'],}},}
</script>

-- 父组件

 <Category><!-- 未解构 --><template scope="data"><!-- 生成ul列表 --><ul><li v-for="(game,index) in data.games" :key="index">{{game}}</li></ul></template></Category>
<Category><!--已解构赋值--><template scope="{games}"><!-- 生成ol列表 --><ol><li v-for="(game,index) in games" :key="index" style="color:red">{{game}}</li></ol></template>
</Category>

第三章插槽的实际应用场景

动态按钮：通过插槽动态修改按钮的样式或内容。
列表组件：使用作用域插槽动态渲染列表项的内容。
表单组件：通过插槽自定义表单的输入框或按钮。
布局组件：使用具名插槽定义不同的布局区域。
……

第四章插槽的性能优化

插槽的使用虽然灵活，但也可能带来性能问题。以下是小编给的一些优化建议：

避免过度使用插槽： 插槽会增加渲染开销，尽量在必要时使用。
使用 v-if 控制插槽渲染：只在需要时渲染插槽内容。
缓存插槽内容：使用 v-memo （vue3.2新增的指令）或 keep-alive 缓存插槽内容，减少重复渲染。插

内置指令 | Vue.js

第五章扩展

小编后面会放已经封装过了几个典例在这！！！！

插槽与第三方库的结合。插槽可以与第三方库（如 Ant Design Vue、element-plus等）结合使用，进一步提升组件的灵活性。例如，通过作用域插槽自定义表格的单元格内容；或者与element-plus二次封装，添加新的功能，优化需求。

<template><a-table :columns="columns" :data-source="dataSource"><template #bodyCell="{ column, record }"><span v-if="column.key === 'name'"><a>{{ record.name }}</a></span></template></a-table>
</template>