1、插槽属于Vue组件的三个核心之一，其余两个分别是属性和事件，今天主要学习插槽的使用。
2、插槽(slot)：将子组件和父组件进行组合，可以弥补视图的不足。是组件具有更好的拓展性
组件的封装方式：抽取共性
3、插槽的使用方式：
（1）vue2.0之前的版本
1️⃣匿名插槽(默认插槽)：一个组件中有且只有一个插槽
<div>
<h2>子组件</h2>
<p>哈哈哈</p>
<!-- 匿名插槽：预留的位置，具体做什么元素由该组件的使用者决定-->
<slot></slot>
</div>
2️⃣具名插槽：
Son.vue
<div>
<slot name="top"></slot>
<h2>子组件</h2>
<p>哈哈哈</p>
<slot name="center"></slot>
<p>啦啦啦</p>
<slot name="bottom"></slot>
</div>
App.vue：
<Son>
<template v-slot:top>
<h1>插槽</h1>
</template>
<template v-slot:center>
<button>按钮</button>
</template>
<template v-slot:bottom>
<select>
<option value="#">请选择</option>
</select>
</template>
</Son>
3️⃣作用域插槽：父组件显示不同的页面结构，页面中的数据来自子组件
Menu.vue：
<template>
<div>
<h2>哈哈哈</h2>
<p>啦啦啦</p>
<slot :lang="list"></slot>
</div>
</template>
<script>
export default {
name: "Menu",
data(){
return {
list:['JavaScript','CSS','HTML','C++','C']
}
}
}
</script>
App.vue
<Menu>
<template slot-scope="slotProps">
{{ slotProps.lang.join('、')}}
</template>
</Menu>
（2）vue2.6之后的版本：插槽使用统一的新的语法(<v-slot>指令)，用来取代<slot>和slot-scope
1️⃣匿名插槽（默认插槽）：在父组件中使用v-slot指令
Son.vue：
<div>
<h2>子组件</h2>
<p>哈哈哈</p>
<p>啦啦啦</p>
<slot></slot>
</div>
App.vue：
<Son>
<template v-slot:default>
<button>测试</button>
</template>
</Son>
2️⃣具名插槽：和老版本用法相同
3️⃣作用域插槽：
Menu.vue
<div>
<h2>哈哈哈</h2>
<p>啦啦啦</p>
<slot :lang="list" name="st1"></slot>
<slot :lang="list" name="st2"></slot>
</div>
</template>
<script>
export default {
name: "Menu",
data(){
return {
list:['JavaScript','CSS','HTML','C++','C']
}
}
}
</script>
App.vue
<Menu>
<template v-slot:st1="slotProps">
<h2>{{ slotProps.lang.join(' --- ')}}</h2>
</template>
</Menu>
<!-- 列表方式-->
<Menu>
<template v-slot:st2="slotProps">
<ul>
<li v-for="(item,index) in slotProps.lang" :key="index">{{ item }}</li>
</ul>
</template>
</Menu>
</div>
