组件插槽的作用
父组件向子组件传递内容
组件插槽的基本用法
1、插槽位置
创建一个新的组件，在组件模板中预留插槽
Vue.component(‘alert-box‘, { template: ` <div class="demo-alert-box"> <strong>ERROR!</strong> <slot></slot> </div> ` });
2、插槽内容
当我们使用该组件时，组件中的内容会被传递到我们模板中插槽位置当中
<alert-box>这里的内容会到插槽里面！</alert-box>
但是，当我们在创建插槽时，插槽内有内容，也同样会显示出来
具名插槽用法
1、插槽定义
在创建一个名为 base-layout 的组件，添加模板中，给插槽添加name值，这里我们写一个既有有name值的插槽，也有没有name值的插槽
<div> <header> <slot name=‘header‘></slot> </header> <main> <slot></slot> </main> <footer> <slot name=‘footer‘></slot> </footer> </div>
2、插槽内容
在页面中使用该组件，在组件中的元素，使用 slot 来匹配插槽的名称；如果没有slot值，则默认匹配给没有name属性的插槽
<base-layout>
<p slot=‘header‘>标题信息</p>
<p>主要内容1</p>
<p>主要内容2</p>
<p slot=‘footer‘>底部信息信息</p>
</base-layout>
但是当插槽有一定数量后，且每个插槽需要插入的内容不仅仅只是一两个时，非常容易造成混乱，于于是Vue有一个API template，它可以临时性包裹需要插入的内容，且本身不会渲染到页面上，使用时同样利用slot 匹配他们的插槽位置
<base-layout>
<template slot=‘header‘>
<p>标题信息1</p>
<p>标题信息2</p>
</template>
<p>主要内容1</p>
<p>主要内容2</p>
<template slot=‘footer‘>
<p>底部信息信息1</p>
<p>底部信息信息2</p>
</template>
</base-layout>
作用域插槽
应用场景：父组件对子组件的内容进行加工处理
1、插槽定义
组件模板代码，info 名称是自定义的，用于将值传递给父组件
<ul>
<li :key=‘item.id‘ v-for=‘item in list‘>
<slot :info=‘item‘>{{item.name}}</slot>
</li>
</ul>
2、插槽内容
应用组件，在应用组件时，需要将需要的数据通过v-bind绑定，且这里的名称需要和模板中的一致，然后在组件中通过template将要插入的内容包裹，同时需要利用属性slot-scope（该值自定义）取得子组件的值，再在template内加工利用slot-scope取得的内容。
<div id="app">
<fruit-list :list=‘list‘>
<template slot-scope=‘slotProps‘>
<strong v-if=‘slotProps.info.id==3‘ class="current">{{slotProps.info.name}}</strong>
<span v-else>{{slotProps.info.name}}</span>
</template>
</fruit-list>
</div>
原文：https://www.cnblogs.com/limu-zy/p/14154386.html