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

插槽slot

news 来源：原创 2025/9/19 11:04:53

在 Vue 中，插槽（slot）主要用于实现父组件向子组件传递内容，是一种典型的父传子的方式
元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。
在这里插入图片描述

默认插槽

在外部没有提供任何内容的情况下，可以为插槽指定默认内容

<template><div class="home"><footerComponent><p>我是匿名插槽</p></footerComponent></div>
</template>

<template><div><h1>子组件</h1><slot></slot>	//  替换为 <p>我是匿名插槽</p></div>
</template>

<slot></slot> //替换为 <p>我是匿名插槽</p>

具名插槽

对于这种场景，元素可以有一个特殊的 attribute name，用来给各个插槽分配唯一的 ID，以确定每一处要渲染的内容
1.具名插槽的内容必须使用模板< template ></ template >包裹;
2.不指定名字的模板插入匿名插槽中，推荐使用具名插槽，方便代码追踪且直观清楚;
3.匿名插槽具有隐藏的名字"default;"
4.跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。

子组件

<template><div class="footerComponent"><h1>子组件</h1><slot name="header"></slot><slot name="body"></slot><slot><p>我是后补内容</p></slot>	 <!-- 等价于 <slot name="default"></slot> --><slot name="footer"></slot></div>
</template>

父组件

template配合v-slot：名字来分发对应标签
<template><div class="home"><footerComponent><template v-slot:header><h2>header</h2></template><template v-slot:[mybody]><h3>动态插槽名</h3></template><p>内容</p><template #footer><h2>footer</h2></template></footerComponent></div>
</template>

具名插槽：
<template v-slot:header> 定义了名为 header 的具名插槽，其中的内容 <h2>header</h2> 会被渲染到父组件中 v-slot:header 对应的位置。
<template v-slot:[mybody]> 使用动态插槽名，根据 mybody 变量的值（这里是 ‘body’）确定插槽名，其中的内容 <h3>动态插槽名</h3> 会被渲染到对应位置。
<template #footer> 是 v-slot:footer 的缩写形式，其中的内容 <h2>footer</h2> 会被渲染到父组件中 v-slot:footer 对应的位置。
默认插槽：
在上述具名插槽之外，<p>内容</p> 这部分内容没有被包裹在带有特定 v-slot 名称的中，所以它属于默认插槽的内容。当子组件内部有默认插槽（一般是通过标签，在 footerComponent.vue 组件的模板中定义）时，<p>内容</p> 就会被渲染到默认插槽的位置。

作用域插槽

父传子

<template><div class="home"><headerComponent :title="myName"><template #header><h2>父组件</h2></template></headerComponent></div>
</template>

<template><div class="headerComponent"><slot name="header"></slot><div class="childName">{{title}}子组件</div></div>
</template>

:title="myName“通过属性绑定，将值传递给子组件
<h2>父组件</h2>使用具名插槽传递到子组件

子传父

给slot传递值，以添加属性的方法传值

<slot :id="item.id" msg="测试文本"></slot>

所有添加的属性，都会被收集到一个对象中

{id:3,msg:"测试文本"}

在template中，通过**#插槽名=”obj“接收，默认插槽名为default**

<template #default="obj"接收，默认插槽名为default><button @click="del(obj.id)>删除</button>
</template>

https://blog.csdn.net/zxdznyy/article/details/128819330

默认插槽

具名插槽

作用域插槽

父传子

子传父

相关文章：