Vue 实现了一套内容分发的 API，将 <slot> 元素作为承载分发内容的出口，即可以将在组件内填写的内容渲染在子组件的slot之间。

v-slot 指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope 特性的 API 替代方案。在接下来所有的 2.x 版本中slot 和 slot-scope 特性仍会被支持，但已经被官方废弃，且不会出现在 Vue 3 中。

匿名插槽

<!-- 父组件 -->
<template >
  <div>
    <button @click="show">点我显示</button>
    <hello-world :flag.sync="flag" v-if="flag"></hello-world>
    <Test>//子组件
      <template :v-slot='form'>//动态数据
        <p>{{form}}</p>
        老师姓名{{form.name}},老师年龄{{form.age}}
      </template>
    </Test>
  </div>
</template>

一个不带 name 的 <slot> 出口会带有隐含的名字“default”，使用时可以简化为

v-slot="form"。

<!-- 子组件 -->
<template>
  <div class="son">
      我是子组件
    <slot></slot>//插槽位置
  </div>
</template>

具名插槽

子组件中通过name属性给槽口设定名称

<!-- 子组件 -->
<template>
  <div class="son">
      我是子组件
    <slot  name="form" :fomr='fomr'></slot>//插槽位置name 插槽名
                                              //form 接收的参数
  </div>
</template>

父组件中通过v-slot:名称的方式来使用具名槽口

<!-- 父组件 -->
<template >
  <div>
    <button @click="show">点我显示</button>
    <hello-world :flag.sync="flag" v-if="flag"></hello-world>
    <Test>             ↓名字  ↓数据
      <template v-slot:form='fomr'>
        老师姓名{{form.name}},老师年龄{{form.age}}
      </template>
    </Test>
  </div>
</template>

父子组件通信案例

通过属性绑定和v-slot我们也可以在子组件中循环渲染父组件中的数据

首先我们在父组件中定义一组数据

data(){
      return{
        listData:[
          {
            name:"Tome",
            job:"web前端"
          },
          {
            name:"Lily",
            job:"java"
          }
        ]
      }
    }

将数据通过属性绑定的方式传递给子组件Home，并且设定一个v-slot插槽对象名称，这时候插槽内部就可以通过prop来访问数据

<Home :data = "listData" v-slot = "prop">

在Home组件中接收父组件传递过来的data

props:{
    data:{
      type:Array,
      required:true
    }
  }

将data传递到slot的自定义属性list中

<template>
  <div class="home">
    <slot :list = "data"></slot>
  </div>
</template>

将Child组件插到Home组件的slot槽口中，并且Child组件可以通过prop.list来循环渲染数据，并且将item通过属性绑定的方式传递给Child

<Child v-for = "(item,index) in prop.list" :key = index :data = "item"></Child>

在Child组件中接收Home传递过来的data

props:{
    data:{
      type:Object,
      required:true
    }
  }

并且在页面中通过key名来渲染数据

<div class="home">
    <p>{{data.name}}</p>
    <p>{{data.job}}</p>
</div>