插槽内容
组件标签中间是可以塞内容进去的，而这个内容就是slot，插槽。只有启动了插槽才能显示标签内容——
<component1>slot内容{{message}}</component1>
var component1 = {
template: `
<div>
听说插槽
<slot>没有solt内容会显示这个</slot>
会放在这上面哦
</div>
`
}
var vue = new Vue({
el: ".app",
data: {
message: "solt message"
},
components: {
component1,
component2
}
})
编译作用域
当你想在一个插槽内使用数据的时候，请注意拿到的数据是父元素的数据.例如上例中，拿到的message数据是从data中拿到的。
后背内容
模板中的<slot></slot>之间如果写内容的话，在slot没有内容的时候会显示出来——
var component1 = {
template: `
<div>
听说插槽
<slot>没有solt内容会显示这个</slot>
会放在这上面哦
</div>
`
}
具名插槽
插槽不一定只有一个，一个组件里面可以有多个插槽，根据【名称】决定内容到底在哪里渲染：
<div class="line"></div>
<component2 v-slot:line1>内容</component2>
<div class="line"></div>
<component2 v-slot:line2>内容</component2>
<div class="line"></div>
<component2 v-slot:line3>内容</component2>
<div class="line"></div>
var component2 = {
template: `
<div>
<div>
title
<slot name="line1"></slot>
</div>
<div>
content
<slot name="line2"></slot>
</div>
<div>
bottom
<slot name="line3" v-bind:title="title" >{{title}}</slot>
</div>
</div>
`,
data: function () {
return {
title: "通过bind方法传递参数"
}
}
}
如上，标签上使用v-slot:name指定插槽的名称，之后内容就会渲染在插槽中。
<slot name="line2"></slot>
不带名称的插槽会带有【default】这个名字
作用域插槽
作用域插槽可以获取子组件的数据，从而渲染到对应的插槽上：
<component4>
<template v-slot:other="otherValue">
{{ otherValue}}
</template>
</component4>
注意，作用域插槽需要用template标签包裹，其参数otherValue是other插槽绑定的属性——
var component4 = {
data: function () {
return {
slotProps: "aaa",
otherP: "1234"
}
},
template: `
<div>
<ul>
<slot :slotProps=slotProps ></slot>
<slot name="other" :otherValue=otherP></slot>
</ul>
</div>
`
}
上例中模板定义了两个插，一个默认的插槽，一个名为other的插槽，其中other还绑定了参数otherP，这个属性名为otherValue，可以在标签中进行调用。
独占默认插槽的缩写语法
只有slot中只有默认slot的时候，才不需要template标签：
<current-user v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</current-user>
甚至default都可以不要：
<current-user v-slot="slotProps">
{{ slotProps.user.firstName }}
</current-user>
另外缩写和普通写法不能混用，只要出现第二个slot就请把他们恢复成原来的样子。
解构插槽
<component4>
<template v-slot:other="otherValue">
{{ otherValue}}
</template>
</component4>
如果输出一次值，你就会发现结果是这样的：
{ "otherValue": "1234" }
所以这玩儿意解构一下会更加简洁
<component4>
<template v-slot:other="{otherValue}">
{{ otherValue}}
</template>
</component4>
// 结果
1234
```
### 动态插槽名
```
<base-layout>
<template v-slot:[dynamicSlotName]>
...
</template>
</base-layout>
```
使用循环输出也不是梦了。
### 具名插槽的缩写
```
<current-user #default="{ user }">
{{ user.firstName }}
</current-user>
```
#号代替了原来的v-slot:。
