vue中的插槽------slot与slot-scope的用法

vue当中的插槽，指的即是slot，是组件当中的一块HTML模板。该模板是否显示，以及如何显示由其父组件说了算。不过插槽显示的位置是由子组件决定 ，你将slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块！

单个插槽

单个插槽是vue官方的叫法。你也可以叫它默认插槽。另外因为该插槽不用设置name属性，也可以称其为匿名插槽。

父组件：

<template>
    <div>
        <h3>我是一个父组件</h3>
        <!--显示子组件，在child组件写入一个HTML模板，该模板会替换子组件的slot-->
        <child>
            <div>
                这里是一段内容
            </div>
        </child>
    </div>
</template>

子组件：

<template>
    <div>
        <h5>我是子组件</h5>
        <slot></slot>
    </div>
</template>

在上面例子中，父组件在<child></child>里面写了html模板，子组件的slot会被该模板覆盖掉！也可以说子组件的插槽被使用了，最终会是下面这个样子：

<div>
    <h3>我是一个父组件</h3>
    <div>
        <h5>我是子组件</h5>
        <div>
            这里是一段内容
        </div>
    </div>
 </div>

如果子组件有多个匿名插槽，均会被使用，如果将上面例子中的子组件修改：

<template>
    <div>
        <h5>我是子组件</h5>
        <slot></slot>
        <slot></slot>
        <slot></slot>
    </div>
</template>

运行之后会变成这个样子：

<div>
   <h3>我是一个父组件</h3>
   <div>
       <h5>我是子组件</h5>
       <div>
           这里是一段内容
       </div>
       <div>
           这里是一段内容
       </div>
       <div>
           这里是一段内容
       </div>
   </div>
</div>

注意：会报错，因为Vue 2.0中不允许有重名的slot。

[Vue warn]: Duplicate presence of slot "default" found in the same render tree - this will likely cause render errors.

具名插槽

匿名插槽是没有名字的插槽。如果给插槽加上name属性，我们可以将其称为具名插槽！

父组件：

<template>
    <div>
        <h3>我是一个父组件</h3>
        <!--显示子组件-->
        <child>
            <div slot="zhang">老张</div>
            <div slot="wang">老王</div>
            <div>老李</div>
        </child>
    </div>
</template>

子组件：

<template>
    <div>
        <h5>我是子组件</h5>
        <!--具名插槽-->
        <slot name="zhang"></slot>
        <!--具名插槽-->  
        <slot name="wang"></slot>
        <!--匿名插槽-->
        <slot></slot>
    </div>
</template>

最终运行的结果：

<div>
    <h3>我是一个父组件</h3>
    <!--显示子组件-->
    <div>
        <h5>我是子组件</h5>
        <div>老张</div>
        <div>老王</div>
        <div>老李</div>
    </div>
</div>

可以看出父组件通过模板上添加slot属性与具名插槽的进行关联。没有slot属性的html模板默认关联匿名插槽。

作用域插槽

作用域插槽与前面两种插槽相比，作用域插槽是要在slot上面绑定数据的。所以我们也可以称作用域插槽为带数据插槽。

父组件：

<template>
    <div>
        <h3>我是一个父组件</h3>
        <!--显示子组件-->
        <child>
            <template slot="zhang" slot-scope="item">
                <div  v-for="sex in item.data">
                    <p>{{sex}}</p>
                </div>
            </template>
        </child>
    </div>
</template>

参考：https://www.jianshu.com/p/1a55faa3c3a9