当我们封装一个组件时，不希望里面的内容写死，希望使用的时候能够自定义里面的内容，这时我们就需要使用到插槽
插槽是什么呢
插槽是子组件提供给父组件的一个占位符，用slot标签表示，父组件可以在这个标签填写任何模板代码
插槽的基本使用
我们在组件需要定制的地方用<slot></slot>标签占位
<slot></slot></div><div class="dialog-footer"><button>取消</button><button>确认</button></div></div>在父组件用上这个组件时，在标签里面添上内容
效果显示如下，传入的内容会替代slot标签
插槽的默认内容
在外部没有提供任何内容的情况，可以为插槽指定默认内容
<slot>hello</slot>当父组件没有使用这个组件提供内容时，默认内容会被渲染，如果提供了插槽内容将取代默认内容
具名插槽
有时候一个组件需要提供多个插槽出口，但之前的方式只能提供一个插槽出口
这时候我们需要给插槽提供一个属性，使它成为唯一可识别的ID,没有命名的插槽默认名为default
<h3><!--给slot提供属性name--><slot name="title"></slot></h3><span class="close">✖️</span></div><div class="dialog-content"><!--给slot提供属性name--><slot name="content"></slot></div>v-slot指令
在为具名插槽传入内容时，我们需要使用一个含有v-slot指令的<template>标签，并将目标插槽的名字传给指令
<MyDialog><template v-slot:title>警告</template><template v-slot:content> 当前未保存，你确定要退出吗</template></MyDialog>v-slot可以简写为#
<MyDialog><template #title>警告</template><template #content> 当前未保存，你确定要退出吗</template></MyDialog>作用域插槽
插槽要同时使用父组件和子组件的数据
将组件的值传出去
<tr v-for="(item,index) in data" :key="item.id"><slot name="body" :item="item" :index="index"></slot></tr> <template #body={item,index}><td>{{index+1}}</td><td><img src="item.picture"></td><td>{{item.name}}</td><td><MyTag v-model="temtext2"></MyTag></td></template>