Vue.js入门教程（十）插槽

第十章：插槽

有话说在前面

---

插槽不但再vue中有，再react和小程序中都存在，他们的意思其实很容易理解，
例如说下面这个，你那个child本身是一个组件，你能直接往组件里面填写内容吗。
明显不能，因为他最后渲染的时候会渲染你组件内部的内容，并不会渲染你在标签里面写的。

<Child>
    <span style="color:red;">hello world</span>
</Child>

这个就不同了，他会先渲染slot里面的那句话，然后再渲染组件，但是下面的span仍然不会渲染。
这下你就明白了吧，slot相当于你在组件模板内，插入的内容。想往哪放往哪放，不受组件渲染的局限！
这个东西在微信小程序中也存在。

<Child>
    <slot>我是插入进来的内容</slot>
    <span style="color:red;">hello world</span>
</Child>

Slot使用

---

1、组件中有单个或多个未命名slot标签时，如下：

<Child><span style=”color:red;”>hello world</span></Child>   

<template>    
<div>
  <slot></slot>
  <slot style=”color:blue;” >这是在slot上添加了样式</slot>
  <slot name=”mySlot”>这是拥有命名的slot的默认内容</slot>
</div>
</template>

会输出：两个红色的hello world，以及一个使用slot的默认内容
注意：在slot标签添加样式无效。拥有命名的插槽不能被不含slot属性的标签内容替换，会显示slot的默认值（具名slot具有对应性）；

2、组件中有多个命名的slot插槽时，可以实现父组件对子组件的指定位置显示内容或传参，如下：

<Child>
  <span slot="header">hello world</span>
  <span slot="main">hello world</span>
  <span slot="footer">hello world</span>
  <span slot="other">{{otherData}}</span>
</Child>

<template>
<div>
  <slot  name="header">这是拥有命名的slot的默认内容</slot>
  <slot  name="main">这是拥有命名的slot的默认内容</slot>
  <slot  name="footer">这是拥有命名的slot的默认内容</slot>
  <slot  name="other">这是拥有命名的slot的默认内容</slot>
</div>
</template>

3、作用域插槽：

使用时候子组件标签<Child>中要有<template scope=”scopeName”>标签，再通过scopeName.childProp就可以调用子组件模板中的childProp绑定的数据，所以作用域插槽是一种子传父传参的方式，解决了普通slot在parent中无法访问child数据的去问题；
作用域插槽代表性的用例是列表组件，允许在parent父组件上对列表项进行自定义显示，如下该items的所有列表项都可以通过slot定义后传递给父组件使用，也就是说数据是相同的，不同的场景页面可以有不同的展示方式：

<ul>
  <slot name="item" v-for="item in items" :text="item.text" :myname="item.myname" >
    slot的默认内容
  </slot>
</ul>
<Child>
  <template slot="item" scope="props">
    <li>{{props.myname}}</li>
  </template>
</Child>