slot插槽使用
使用场景，一般父组件中又一大段模板内容需要运用到子组件上。或者更加复杂的，子组件需要运用到父组件大段模板内容，而子组件却不知道挂载的内容是什么。挂载点的内容是由父组件来决定的。
Slot的通俗理解
slot是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中<slot>位置），当插槽也就是坑<slot name=”mySlot”>有命名时，组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容；
// 父组件
<template>
<div id="app">
<div>头部</div>
<div>
<v-childe>
<!-- 模板内容 -->
<div>来自父组件模板内容</div>
<div>这里的模板内容将会替换到子组件slot位置上</div>
<div>{{message}}</div>
<!-- 模板内容 -->
</v-childe>
</div>
<div>底部</div>
</div>
</template>
<script>
import Childe from './components/childe.vue'
export default {
components:{
'v-childe':Childe
},
data(){
return{
message:'动态数据' //message的数据根据父组件来决定
}
}
}
</script>
注意：slot分发的内容，作用域在父组件上
//子组件
<template>
<div>
<div>子组件头部</div>
<slot>
<!-- 默认内容 -->
<div>当父组件没有定义slot内容时，会默认显示</div>
<!-- 默认内容 -->
</slot>
<div>子组件底部</div>
</div>
</template>
注意：子组件内<slot>内的备用内容，他的作用域是子组件本身。
父组件的内容将会替换到子组件的slot位置上，因为没有指定名字，所以子组件无论添加多少个<slot></slot> 都是同样的内容。
显示结果
//当父组件使用了slot时 （即<v-child> .... </v-chiild>里面有内容）
头部
子组件头部
来自父组件模板内容
这里的模板内容将会替换到子组件slot位置上
动态数据
子组件底部
底部
//当父组件没有使用slot时 （即<v-child></v-child>为空标签）
头部
子组件头部
当父组件没有定义slot内容时，会默认显示
子组件底部
底部
具名slot
为slot加上名字能分发更多内容
// 父组件
<template>
<div id="app">
<div>头部</div>
<div>
<v-childe>
<!-- 模板内容 -->
<div slot="top">
<div>父组件插入名为top的slot内容</div>
</div>
<div slot="bottom">
<div>父组件插入名为bottom的slot内容</div>
</div>
<div>动态数据</div> //注意这里父组件没有使用slot的name特性，他将作为默认slot显示
<!-- 模板内容 -->
</v-childe>
</div>
<div>底部</div>
</div>
</template>
//子组件
<template>
<div>
<div>子组件头部</div>
<slot name="top">
<!-- 默认内容 -->
<div>当父组件没有定义slot内容时，会默认显示</div>
<!-- 默认内容 -->
</slot>
<div>子组件底部</div>
</div>
</template>
当父组件和子组件的slot名子一致的时候，才会显示父组件插入的内容。而名字不一致的内容则会抛弃
访问slot
在组件内，可通过 this.$slot.default 访问默认插入内容
可通 this.$slot.+name 例如this.$slot.top 访问具名slot插入的内容