理解vue中的插槽------slot与slot-scope

用户1272076

发布于 2019-03-26 17:28:29

1.4K0

发布于 2019-03-26 17:28:29

文章被收录于专栏：张培跃

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>

在上面例子中，父组件在里面写了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>

赶紧动手试试吧！

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2018-09-13，如有侵权请联系 cloudcommunity@tencent.com 删除

html