032 V slot的两种用法

不二如是

                               
登录/注册后可看大图

上一讲我们介绍了slot的定义，本次学习两种常见的slot用法。

在子组件内使用特殊的<slot>元素就可以为这个子组件开启一个slot（插槽）。

在父组件模板里，插入子组件标签内的所有内容将替代子组件的<slot>标签及它的内容。

很好理解，用代码演示下：

<div id="myApp">
    <child-component>
        <p>分发的内容</p>
        <p>更多分发的内容</p>
    </child-component>
</div>

<script>
    Vue.component('child-component',{
        template:'\
        <div>\
        <slot>\
        <p>如果父组件没有插入的内容，在下将作为默认出现</p>\
        </slot>\
        </div>'
    });

    var app = new Vue({
        el:"#myApp"
    })
</script>

子组件child-component的模板内定义了一个<slot>元素，并且用一个<p>作为默认的内容。

在父组件没有使用slot时，会渲染这段默认的文本。

如果写入了slot，便会替代整个<slot>，渲染结果为：

<div id="myApp">
    <div>
        <p>分发的内容</p>
        <p>更多分发的内容</p>
    </div>
</div>

注意，子组件<slot>内的备用内容，它的作用域是子组件本身。

---

具名Slot

给slot元素指定一个name后就可以分发多个内容，具名Slot可以和单个Slot共存。

代码示例：

<div id="myApp">
    <child-component>
        <h1 slot="header">我是标题</h1>
        <p>分发的内容</p>
        <p>更多分发的内容</p>
        <div slot="footer">底部信息</div>
    </child-component>
</div>

<script>
    Vue.component('child-component',{
        template:'\
        <div class="container">\
            <div class="header">\
                <slot class="header"></slot>\
            </div>\
            <div class="main">\
            <slot></slot>\
            </div>\
            <div>\
            <slot name="footer"></slot>\
            </div>\
        </div>'
    });

    var app = new Vue({
        el:"#myApp"
    })
</script>

子组件内声明了3个slot元素，其中在：

<div class="main">

内部的slot没有使用name特性，将作为默认的slot出现，父组件没有使用slot特性的元素与内容将出现在这里。

如果没有指定默认的匿名slot，父组件多余的内容片段都将被抛弃。

上例最终渲染结果：

<div class="container">
    <div class="header"><p>分发的内容</p>
        <p>更多分发的内容</p></div>
    <div class="main"><p>分发的内容</p>
        <p>更多分发的内容</p></div>
    <div>
        <div>底部信息</div>
    </div>
</div>

---

课后作业


1、在子组件内使用特殊的<slot>元素就不可以为这个子组件开启一个slot（插槽）。（T/F）




答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

Ruide

1.F

一笙彤

0

jack6666

1