插槽，也就是槽，是组件的一块HTML模板，这块模板显示不显示，以及怎样显示由父组件来决定。
-
作用: 主要用于父组件向子组件传递 标签+数据 , （prop和自定义事件只是传递数据）
-
场景：一般是某个位置需要经常动态切换显示效果（如饿了么)
-
分类：匿名插槽| 具名插槽| 作用域插槽
子组件定义插槽
在子组件中定义插槽, 当父组件向指定插槽传递标签数据后, 插槽处就被渲染，否则插槽处不会被渲染
<div>
<!-- name属性值指定唯一插槽名，父组件通过此名指定标签数据-->
<slot name="aaa">不确定的标签结构 1</slot>
<div>组件确定的标签结构</div>
<slot name="bbb">不确定的标签结构 2</slot>
</div>
父组件传递标签数据
<child>
<!--slot属性值对应子组件中的插槽的name属性值-->
<div slot="aaa">向 name=aaa 的插槽处插入此标签数据</div>
<div slot="bbb">向 name=bbb 的插槽处插入此标签数据</div>
</child>
插槽注意事项
-
只能用于父组件向子组件传递
标签+数据 -
传递的插槽标签中的数据处理都需要定义所在父组件中
匿名插槽 它不用设置名称属性，可以放置在组件的任意位置；可以理解为父传入样式及内容，子负责展示
index.vue 父组件
<slot2 :data="" color="" >
<!--匿名插槽-->
<ul>
<li>1</li>
<li>2</li>
</ul>
<ul slot>
<li>1</li>
<li>2</li>
</ul>
</slot2>
slot2.vue 子组件
<!--匿名插槽-->
<slot></slot>
具名插槽 插槽加了名称属性，就变成了具名插槽。具名插槽可以在一个组件中出现Ñ次，出现在不同的位置
index.vue 父组件
<slot2>
<div slot="n1">
<h2>具名插槽n1</h2> </div> <!--具名插槽 传入父的值--> <div slot="n2">
<h2>具名插槽n2</h2>
<ul>
<li v-for="(v,i) in arr" :key="i">{{v}}</li>
</ul>
</div>
</slot2>
slot2.vue 子组件
<!--具名插槽-->
<slot name="n1"></slot>
<slot name="n2"></slot>
作用域插槽 官方叫它作用域插槽，实际上，对比前面两种插槽，我们可以叫它带数据的插槽。 什么意思呢，就是前面两种，都是在组件的模板里面写 作用域插槽跟单个插槽和具名插槽的区别，因为单个插槽和具名插槽不绑定数据，所以父组件提供的模 板一般要既包括样式又包括内容， 而作用域插槽，父组件只需要提供一套样式（在确实用作用域插槽绑 定的数据的前提下）相当于父组件提供一套样式，数据都是子组件的。
index.vue 父组件
<slot2>
<div slot-scope="scope">
{{scope.title}}
</div>
</slot2>
slot2.vue 子组件
<!-- 作用域插槽 -->
<slot :title="title"></slot>
子组件中传入数组
index.vue 父组件
<slot2>
<div slot-scope="scope">
<ul>
<li v-for="(v,i) in scope.arr" :key="i">{{v}}</li>
</ul>
</div>
</slot2>
