2025年Vue插槽用法（vuejs插槽）

科技前沿 • 2025-05-31 14:55 • 阅读 44

大家好，我是讯享网，很高兴认识大家。

 <p id="main-toc"><strong>目录</strong></p>

一、默认插槽

（1）概念

（2）代码展示

（3）后备内容

二、具名插槽

（1）概念

（2）代码展示

三、作用域插槽

（1）概念

（2）使用步骤

（3）用例展示

插槽究竟是什么呢？简单来说插槽就是用于决定将所携带的内容，插入到指定的某个位置。举个例子，比如说下面的图：

加入头部和底部都是写死的，但是我们希望主题部分不写死，那么这时候我们就需要用插槽了，也就是说插槽的作用就是让组件内部的一些结构支持自定义。

讯享网

封装组件时，可以为预留的<slot>插槽提供后备内容（默认内容）。

效果：

外部使用组件时，不传东西，则slot会显示后备内容

外部如果使用组件，传东西，则slot整体会被换掉，显示传的东西。
讯享网

与前面的默认插槽的作用也是一样的，不过具名具名，就是具有名字的插槽，起名字自然就是为了辨别是哪一个，也就是说一个组件内有多处结构，需要外部传入标签进行定制。

如下图的场景：

这次我想让头部主体和底部三部分都可以动态展示。

讯享网

其实如果将插槽分类的话，插槽只分成两种，分别是默认插槽和具名插槽，作用域插槽并不在其中。

作用域插槽就是在定义slot插槽的同时，它是可以传值的，给插槽绑定数据，将来使用组件时可以用（父传子）。

（1）给slot标签，以添加属性的方式传值
（2）所有添加的属性都会被收集到一个对象中
讯享网
（3）在template中，通过'#插槽名=obj'接收，默认插槽名为default

需求：创建一个表格，对表格每一行数据都可以进行删除，根据他的id值

讯享网