插槽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>

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