什么是插槽
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。
基本使用
编写一个父组件
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
template: ` <h2>父组件</h2>`
})
const vm = app.mount("#app")
</script>
</html>再写一个子组件
app.component('son', {
template: `
<div>
<h3>子组件</h3>
</div>
`
})父组件调用子组件
const app = Vue.createApp({
template: ` <h2>父组件</h2><son />`
})插槽如何使用呢？只需要在子组件中加入<slot></slot>，然后在父组件中使用。
app.component('son', {
template: `
<div>
<h3>子组件</h3>
<slot></slot>
</div>
`
})const app = Vue.createApp({
template: ` <h2>父组件</h2><son>这是父组件要在子组件中显示的内容</son>`
})运行效果：
父组件
子组件
这是父组件要在子组件中显示的内容插槽支持任何DOM元素，比如我们添加style样式
const app = Vue.createApp({
template: ` <h2>父组件</h2><son><div style="color:red;font-size:25px">这是父组件要在子组件中显示的内容</div></son>`
})默认插槽
我们如果需要子组件在任何情况下，都能渲染文本。我们可以将默认文本放在<slot>标签内:
app.component('son', {
template: `
<div>
<h3>子组件</h3>
<slot>子组件的默认内容</slot>
</div>
`
})现在使用父组件去调用：
const app = Vue.createApp({
template: ` <h2>父组件</h2><son/>`
})运行效果：
父组件
子组件
子组件的默认内容具名插槽
有的时候，我们一个子组件需要多个插槽，例如：
app.component('son', {
template: `
<div>
<h3>公民基本信息</h3>
<slot>
<!--姓名-->
</slot>
<slot>
<!--年龄-->
</slot>
<slot>
<!--性别-->
</slot>
</div>
`
})像这种情况，<slot> 有一个特殊的属性name
app.component('son', {
template: `
<div>
<h3>公民基本信息</h3>
<slo name="name">
姓名
</slot>
<slot name="age">
年龄
</slot>
<slot name="sex">
性别
</slot>
</div>
`
})如何使用呢？很简单只需要在DOM元素上，使用v-slot注明使用的插槽名称：
const app = Vue.createApp({
template: `
<h2>父组件</h2>
<son>
<template v-slot:name>小明</template>
<template v-slot:age>7</template>
<template v-slot:sex>男</template>
<son/>
`
})运行效果：
父组件
公民基本信息
小明7男v-slot:name这种语法可以简写成#name，代码如下：
const app = Vue.createApp({
template: `
<h2>父组件</h2>
<son>
<template #name>小明</template>
<template #age>7</template>
<template #sex>男</template>
<son/>
`
})注：只要出现多个插槽，所有的插槽使用完整的基于 <template> 的语法。
插槽的作用域
有时让插槽内容能够访问子组件中才有的数据是很有用的。
写一个子组件:
const app = Vue.createApp({
data(){
return {
list:['A','B','C']
}
},
template: `<div v-for="item in list">{{item}}</div>`
})父组件想使用子组件插槽中的值，可以使用:绑定的形式进行传递，比如写成:item="item"，具体的代码可以写成下面的样子。
const app = Vue.createApp({
data(){
return {
list:['A','B','C']
}
},
template: `
<div>
<slot v-for="item in list" :item="item" />
</div>`
})写完后父组件中用v-slot="xxx"的形式接受，接收后就可以使用了
const app = Vue.createApp({
template: `
<list v-slot="props">
<span>{{props.item}}</span>
</list>
`注意这里的props是子组件传递过来的数据都是对象，但你也可以使用任意你喜欢的名字。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。