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>
