vue插槽的用法
插槽的作用：可以让用户在组件标签中自定义内容
# 插槽
## 普通插槽
```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>
```
