插槽的作用：可以让用户在组件标签中自定义内容

# 插槽

## 普通插槽

```javascript

const com = {

  template: `

    <div>

      其他内容

      <slot></slot>

    </div>

  `

}

```

```html

<div>

  <com>

    自定义内容

  </com>

</div>

```

## 具名插槽

> 默认的slot有一个名字为default

```javascript

const com = {

  template: `

    <div>

      其他内容

      <slot name="自定义slot名字"></slot>

      <slot name="自定义slot名字2"></slot>

    </div>

  `

}

```

```html

<div>

  <com>

    <template v-slot:自定义slot名字></template>

    <template v-slot:自定义slot名字2></template>

  </com>

</div>

```

## 作用域插槽

> 给用户留一些需要的数据

```javascript

const com = {

  template: `

    <div>

      其他内容

      <slot key="value" key2="value2" key3="value3"></slot>

    </div>

  `

}

```

```html

<div>

  <com>

//scope是slot传递过来的数据

    <template v-slot="scope">

      {{scope.key}}

      <button >删除</button>

    </template>

  </com>

  <com>

//使用解构赋值方式会更简单

    <template v-slot="{key}"></template>

  </com>

</div>

```