slot

发表于2025-09-13|更新于2025-12-11|vue框架

|总字数:390|阅读时长:1分钟|浏览量:

slot

1. slot 是什么

slot（插槽）是 Vue 组件中的内容分发机制，允许父组件向子组件的指定位置插入自定义内容，实现组件的 “模板复用 + 内容定制”，让组件更灵活通用。

2. 使用场景

组件内容自定义：封装通用组件（如弹窗、卡片）时，让父组件自定义组件内部的部分内容（如弹窗的标题、卡片的主体）；
组件结构扩展：复杂组件（如表格、导航栏）中，允许父组件插入自定义的列、菜单项；
组件逻辑与视图分离：子组件负责逻辑 / 布局，父组件负责具体视图内容的展示。

3. 分类

分类	说明
匿名插槽	无名称的插槽，父组件插入的内容默认填充到该插槽（一个组件仅一个匿名插槽）
具名插槽	带名称的插槽（通过`name`属性标识），父组件可指定内容插入到对应名称的插槽
作用域插槽	子组件向父组件传递数据的插槽，父组件可接收子组件的数据并自定义渲染内容

4. 原理分析

slot 的本质是组件编译时的内容分发标记：

子组件中slot标签会被标记为 “内容插入点”；
父组件中插入到子组件标签内的内容，会被编译为 “待分发内容”；
Vue 在渲染时，将 “待分发内容” 匹配到子组件对应的slot位置，完成内容注入。

文章作者: BoardYoungC

文章链接: http://example.com/2025/09/13/vue/slot/

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 BoardYoungC！

相关推荐

ES6中 Promise在以往我们如果处理多层异步操作，我们往往会像下⾯那样编写我们的代码 12345671 doSomething(function(result) {2 doSomethingElse(result, function(newResult) {3 doThirdThing(newResult, function(finalResult) {4 console.log('得到最终结果: ' + finalResult);5 }, failureCallback);6 }, failureCallback);7 }, failureCallback); promise 对象仅有三种状态 pending （进⾏中） fulfilled （已成功） rejected （已失败）对象的状态不受外界影响，只有异步操作的结果，可以决定当前是哪⼀种状态⼀旦状态改变（从 pending 变为 fulfilled 和从 pending 变为 rejected...

ES6中数组新增扩展

ES6中数组新增了扩展扩展运算符的应⽤ES6通过扩展元素符 … ，好⽐ rest 参数的逆运算，将⼀个数组转为⽤逗号分隔的参数序列 1234561 console.log(...[1, 2, 3])2 // 1 2 33 console.log(1, ...[2, 3, 4], 5)4 // 1 2 3 4 55 [...document.querySelectorAll('div')]6 // [<div>, <div>, <div>] 主要⽤于函数调⽤的时候，将⼀个数组变为参数序列 123456781 function push(array, ...items) {2 array.push(...items);3 }4 function add(x, y) {5 return x + y;6 }7 const numbers = [4, 38];8 add(...numbers) // 42 ES6 允许为函数的参数设置默认值 1234561 function log(x,...

Node 中的 Stream

Node 中的 Stream流（Stream），是⼀个数据传输⼿段，是端到端信息交换的⼀种⽅式，⽽且是有顺序的,是逐块读取数据、处理内容，⽤于顺序读取输⼊或写⼊输出 Node.js 中很多对象都实现了流，总之它是会冒数据（以 Buffer 为单位）它的独特之处在于，它不像传统的程序那样⼀次将⼀个⽂件读⼊内存，⽽是逐块读取数据、处理其内容，⽽不是将其全部保存在内存中流可以分成三部分： source 、 dest 、 pipe 在 source 和 dest 之间有⼀个连接的管道 pipe ,它的基本语法是 source.pipe(dest) ， source 和 dest 就是通过pipe连接，让数据从 source 流向了 dest 在 NodeJS ，⼏乎所有的地⽅都使⽤到了流的概念，分成四个种类： • 可写流：可写⼊数据的流。例如 fs.createWriteStream() 可以使⽤流将数据写⼊⽂件 • 可读流：可读取数据的流。例如fs.createReadStream() 可以从⽂件读取内容 • 双⼯流：既可读⼜可写的流。例如 net.Socket •...

Node 中的 Buffer

Node 中的 Buffer在 Node 应⽤中，需要处理⽹络协议、操作数据库、处理图⽚、接收上传⽂件等，在⽹络流和⽂件的操作中，要处理⼤量⼆进制数据，⽽ Buffer 就是在内存中开辟⼀⽚区域（初次初始化为8KB），⽤来存放⼆进制数据在上述操作中都会存在数据流动，每个数据流动的过程中，都会有⼀个最⼩或最⼤数据量如果数据到达的速度⽐进程消耗的速度快，那么少数早到达的数据会处于等待区等候被处理。反之，如果数据到达的速度⽐进程消耗的数据慢，那么早先到达的数据需要等待⼀定量的数据到达之后才能被处理这⾥的等待区就指的缓冲区（Buffer），它是计算机中的⼀个⼩物理单位，通常位于计算机的 RAM 中简单来讲， Nodejs 不能控制数据传输的速度和到达时间，只能决定何时发送数据，如果还没到发送时间，则将数据放在 Buffer 中，即在 RAM 中，直⾄将它们发送完毕 Buffer 类在全局作⽤域中，⽆须 require 导⼊创建 Buffer 的⽅法有很多种，我们讲讲下⾯的两种常⻅的形式： • Buffer.from() •...

Vue 常用修饰符

Vue 常用修饰符一、事件修饰符修饰符是什么功能应用场景 .stop 阻止事件冒泡的修饰符阻止当前事件向父元素冒泡子元素点击事件不影响父元素 .prevent 阻止默认行为的修饰符阻止标签的默认行为（如 a 标签跳转、表单提交）自定义表单提交逻辑 .once 事件仅触发一次的修饰符事件绑定后仅执行一次，之后自动解绑按钮点击后仅响应一次（如提交） .self 仅自身触发的修饰符仅当事件触发在当前元素本身时才执行避免父元素冒泡事件触发自身 .capture 事件捕获阶段触发的修饰符事件在捕获阶段（而非冒泡阶段）执行需要优先处理父元素事件的场景二、按键修饰符修饰符是什么功能应用场景 .enter 监听回车键的修饰符仅当按下回车键时触发事件输入框按回车提交内容 .tab 监听 Tab 键的修饰符仅当按下 Tab 键时触发事件表单输入框切换焦点 .delete 监听删除 / 退格键的修饰符仅当按下删除 / 退格键时触发事件输入框内容删除时的逻辑处理 .esc 监听...

axios1. axios 是什么axios 是一个基于 Promise 的HTTP 请求库，用于浏览器和 Node.js 环境中发送网络请求（如 GET、POST 等），是 Vue 项目中常用的接口请求工具，支持请求拦截、响应拦截、取消请求等功能。 2. 为什么要封装在 Vue 中封装 axios 主要是为了提升代码的复用性、可维护性与规范性，具体原因包括：统一配置：集中管理请求基地址、超时时间等公共配置；统一拦截：全局处理请求头（如携带 Token）、响应错误（如登录失效、接口报错）；简化调用：封装通用的请求方法（如get/post），减少重复代码；统一规范：约束接口请求的参数格式、响应处理逻辑。 3. 如何封装（Vue2 中）以下是 Vue2 中 axios 的典型封装步骤：（1）创建 axios 实例并配置公共参数12345678// src/utils/request.jsimport axios from 'axios';// 创建axios实例const service = axios.create({ ...

数据加载中