让父组件向子组件指定位置插入html结构
默认插槽
定义
代码语言：javascript复制<template>
<div class="hello">
<h3>title</h3>
<!-- 定义一个插槽，将使用组件标签时传递的内容（innerText/innerHtml）填充到此处 -->
<slot>默认值，使用组件标签时没有传内容则显示这个</slot>
</div>
</template>使用
代码语言：javascript复制<template>
<div class="container">
<HelloWorld>
123
</HelloWorld>
<HelloWorld>
<button>456</button>
</HelloWorld>
<HelloWorld/>
</div>
</template>注，通过插槽填入的元素样式通过所在的组件定义，在使用处定义scoped样式不会生效
具名插槽
代码语言：javascript复制<template>
<div class="hello">
<h3>title</h3>
default:
<slot>默认值，使用组件标签时没有传内容则显示这个</slot>
slot1:
<slot name="slot1">slot1</slot>
slot2:
<slot name="slot2">slot2</slot>
</div>
</template><template>
<div class="container">
<HelloWorld>
<!-- 只能在template上使用v-slot指令 -->
<template v-slot:default>
123
</template>
<template v-slot:slot1>
<a href="">slot1</a>
</template>
<!-- 在组件上指定插槽名 -->
<button slot="slot2">slot2</button>
</HelloWorld>
<HelloWorld>
<h3>456</h3>
</HelloWorld>
<HelloWorld/>
</div>
</template>作用域插槽
数据在组件中定义，数据的呈现形式在插槽使用者中中定义
代码语言：javascript复制<template>
<div class="hello">
<!-- 将数据传递给插槽使用者 -->
<slot :datalist="datalist"></slot>
</div>
</template><template>
<div class="container">
<HelloWorld>
<!-- 绑定插槽属性 -->
<template v-slot:default="slotProps">
<ul>
<li v-for="(item,index) in slotProps.datalist" :key="index">{{ item }}</li>
</ul>
</template>
</HelloWorld>
<HelloWorld>
<!-- 支持解构赋值 -->
<template v-slot:default="{datalist}">
<h2 v-for="(item,index) in datalist" :key="index">{{ item }}</h2>
</template>
</HelloWorld>
<!-- 只有金存在默认插槽时，可以直接在组件上绑定属性 -->
<HelloWorld v-slot="slotProps">
<ol>
<li v-for="(item,index) in slotProps.datalist" :key="index">{{ item }}</li>
</ol>
</HelloWorld>
</div>
</template>
