当我们封装一个组件时，不希望里面的内容写死，希望使用的时候能够自定义里面的内容，这时我们就需要使用到插槽

插槽是什么呢

插槽是子组件提供给父组件的一个占位符，用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>

​