Vue为何要有插槽

通常来讲父组件只能复用子组件可是没办法改变子组件的内容和样式 总之就是 你能够用我可是不能够改变我

就像买车同样 不能本身去决定车的配置、外观、性能、尺寸，这些都是厂家本身设计好而后批量生产的 你们买下都是同样的

而插槽的出现就提供了父组件能够改造子组件的能力 至关于你对本身的车实现了私人订制

Vue中插槽分为三种 下面我以车比做子组件来解析

1.具名插槽（侧重于改变子组件内容）

在子组件template属性中添加多个slot标签 而这个slot标签都各自带有本身的name属性 属性值都不同

<slot name="AAA"></slot>
<slot name="BBB"></slot>
<slot name="CCC"></slot>

父组件能够对应不一样的name值 把相对应的内容 插入到各自slot标签里
slot标签内能够包裹任意原子组件的内容 插入的内容将会替换掉它

（就像在车上不一样的位置对应加装不一样的配件）

二、默认插槽（侧重于改变子组件内容）

在子组件template属性中添加一个slot标签 而这个slot标签不带name属性

<slot></slot>

父组件里任何内容都默认加到这个slot标签里
slot标签内能够包裹任意原子组件的内容 插入的内容将会替换掉它

（就像在车上默认只在车顶这一个地方加装行李架 全部配件都是放到车顶作行李架的）

三、做用域插槽（侧重于改变子组件样式）

父组件复用子组件的时候 对某一个子组件内容样式不满意 此时在 子组件内你但愿改变的那部份内容外 包裹一个slot标签 给slot自定义一个属性<slot :data="xxx"></slot>（名称本身起）父组件模板定义一个slot-scope="slot"属性 模板内经过slot.xxx能够拿到子组件的数据 拿到数据后就好办了 能够任你蹂躏了 你想把它弄成什么样就弄成什么样
父组件改变了子组件的样式 可是内容仍是子组件的

<div id="app">
<child>
<template slot-scope="slot"> //Vue2.5.xxx版本如下只能用template模板 以上能够自定义
<span v-for="item in slot.data"></span>
</template>
</child>
</div>

<template id="child">
<div>
<slot :data="listData">
<ul>
<li v-for="item in listData">{{item}}</li>
</ul>
</slot>
</div>
</template>

（就像是你对车身颜色不满意 你把灰色改为了白色可是车仍是原来的车）

组件的插槽是为了让咱们封装的组件更加具备扩展性。咱们在路上看到的吉普牧马人基本上绝大多数都是被改装过的，有的改装事后更加的好看，有的更加霸气，有的攀爬能力大大提升， 牧马人之因此能够轻易被改装，就是由于他天生的越野基因和改装潜力，咱们在封装组件的时候也是也是同样的，要尽量地预备插槽，提高组件的“改装潜力”，好比移动网站的导航栏，移动开发中几乎每一个页面都有导航栏，可是每一个页面的导航栏都是同样的吗？NO! 导航栏咱们必然要封装成一个插件，好比nav-bar组件，一旦有了这个组件，咱们就能够在多个页面进行复用了。