Vue为什么要有插槽

一般来说父组件只能复用子组件但是没办法改变子组件的内容和样式 总之就是 你可以用我但是不可以改变我

就像买车一样 不能自己去决定车的配置、外观、性能、尺寸，这些都是厂家自己设计好然后批量生产的 大家买下都是一样的

而插槽的出现就提供了父组件可以改造子组件的能力 相当于你对自己的车实现了私人订制

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

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

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

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

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

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

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

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

<slot></slot>

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

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

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

父组件复用子组件的时候 对某一个子组件内容样式不满意 此时在 子组件内你希望改变的那部分内容外 包裹一个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组件，一旦有了这个组件，我们就可以在多个页面进行复用了。