理解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>

而后看一下console:

 

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

没错，飘红了！为何？由于Vue 2.0中不容许有重名的slot。若是你没有代码洁癖的话，如今就能够下班闪人了！等着后面同事用你组件时来向你抱怨！若是要在不一样位置渲染同一内容，你能够用 prop 来传递。

具名插槽

匿名插槽是没有名字的插槽。若是给插槽加上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上面绑定数据的。因此咱们也能够称做用域插槽为带数据插槽。
再来看一下以前两种插槽的写法：

 

<!--匿名插槽-->
<slot></slot>
<!--具名插槽-->
<slot name="up"></slot>

做用域插槽须要绑定上数据：

 

<template>
    <div>
        <h5>我是子组件</h5>
        <slot name="zhang" :data="sexArr"></slot>
    </div>
</template>

<script>
    export default {
        name: "child",
        data(){
            return {
                sexArr:["男","女"]
            }
        }
    }
</script>

父组件：

 

<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>

赶忙动手试试吧！

—————END—————