Vue组件之--slot内容分发

以前，Vue组件总是一个个的空标签的形式出现的，那么如果说组件标签里面有内容，那么要获取这些内容要怎么办呢？

Vue提供了一个解决方案：slot内容分发，其作用就是用来获取组件中的原内容（就是组件标签内部的内容）。

用法分为两种情况:当组件内的原内容结构比较简单的时候可以使用单一slot，当原内容结构比较复杂的时候使用具名slot；

单一slot：在组件模板合适的位置插入slot组件即可；

<div id="container" v-cloak>
<my-compo>你好，2018！</my-compo>
<!-- 在这里组件的原内容是：你好，2018 ，比较简单-->
</div>
<!-- 在组件模板中获原内容 -->
<template id="myCompon">
<div class="content">
<h3>{{house.price}}</h3>
<slot>没有原内容</slot>
<!-- 当没有原内容的时候就会显示“没有原内容”，有的话就会被替换成原内容 -->
</div>
</template>

具名slot：给你想获取的原内容部分指定一个属性`slot = "值"`，然后在在组件的模板中的合适位置插入一个slot元素，设定`name= "值"`即可。例如：

<div id="container" v-cloak>
<my-compon1>
<div slot = "smile">
<i>哈哈</i>
</div>
<ul slot="list">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</my-compon1>
<!-- 原内容结构比较复杂 -->
<!-- 获取原内容中你想要的那一部分 -->
</div>
<!-- 获取你想要的那一部分 -->
<template id="myCompon1">
<div>
<slot name="smile"></slot>
<!-- 这个时候，在组件内部含有属性slot="smile"的元素包裹的原内容就会被显示到这里 -->
4000

<h4>{{clothes}}</h4>
<!-- 同上 -->
<slot name="list"></slot>
</div>
</template>

作用域插槽slot:

首先要将子组件的数据传递给子组件模板中的slot插槽（v-bind绑定属性）:

<!-- 子组件模板 -->
<template id="sonTemplate">
<div class="son-class">
<slot v-bind:heheda="computer.price" v-bind:materials="computer.material"></slot>
</div>
</template>

然后在父组件模板中具有特殊特性 slot-scope的 <template> 元素必须存在，表示它是作用域插槽的模板（也就是说被<template slot-scope></template>元素包围内容就是slot的模板，在渲染的时候slot就会被渲染成该模板内容）,slot-scope的值将被当作一个临时的变量名，此变量用来接收从子组件传递过来的props对象(就是一个数据对象)；

<!-- 父组件模板 -->
<template id="compo">
<div>
<h3>{{greeting}}</h3>
<my-app-son>
<!-- 这里  <template slot-scope = "props">就是slot插槽的模板,也就是说在渲染的时候slot会被渲染成该模板包裹着的内容-->
<template slot-scope = "props">
<!-- 这里的props就是一个包含有属性heheda和materials的对象 -->
<h3>{{greeting}}</h3>
<h4>{{props.heheda}}</h4>
<h4>{{props.materials}}</h4>
</template>
</my-app-son>
</div>
</template>

在 2.5.0+，slot-scope 能被用在任意元素或组件中而不再局限于 

<template>

了
作用域插槽更典型的用例是在列表组件中，允许使用者自定义如何渲染列表的每一项：

<!-- <my-awesome-list>是一个子组件，子组件绑定的属性items，数据是来源于父组件 -->
<my-awesome-list :items="items">
<!-- 作用域插槽也可以是具名的 -->
<li
slot="item"
slot-scope="props"
class="my-fancy-item">
{{ props.text }}
</li>
</my-awesome-list>

列表组件的模板：

<ul>
<!--子组件模板， 这里的items应该是通过父子通信获得的 -->
<slot name="item" v-for="item in items" :text="item.text"></slot>
</ul>

注意：在分析组件+slot具体出来的内容是什么的时候，可以先将组件内部的原内容给剥离出来,在此基础上进行分析在没有原内容的时候组件将会是什么样子，

然后再在分析结果的基础上将原内容加上，再进行分析，最后得出结果