插槽slot

在 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>

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