64. Vue中的插槽slot

需求

在Vue的组件开发中，有些情况组件中的 html 内容是需要通过父组件判断之后，才能有确认的。没有理由对于父组件的判断编写多个存在一定重复代码的组件来进行切换吧！这时候就需要使用到插槽 slot 了。

下面来写一个代码示例，讲解一下这种情况以及插槽 slot 的基本使用。

父子组件传递dom元素使用问题的示例

首先编写一个基础的代码，要求有一个子组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中插槽slot</title>
    <!--  1.导入vue.js  -->
    <script src="lib/vue.js"></script>
</head>
<body>

<!-- 2.创建app   -->
<div id="app">

    <child></child>

</div>

<!-- 3.创建vm   -->
<script>

    Vue.component("child", {
        template: "<div><h1>hello world</h1></div>"
    });

    let vm = new Vue({
        el: "#app",
        data: {},
    })
</script>

</body>
</html>

在上面的代码中，我写了一个简单的全局组件 child，现在页面上展示如下：

假设我需要通过父元素将一部分 html 内容传递到组件中使用，如果不使用 slot 的话，该怎么操作呢？

使用父子组件props方式传递 html 内容

<child content="<h2>父组件传递的内容</h2>"></child>

Vue.component("child", {
    props: ['content'],
    template: "<div><h1>hello world</h1> {{content}} </div>"
});

此时，我们来看看页面显示 content 的内容，如下：

可以发现，我们的html内容并不能直接显示，而只是显示文本信息，没有html标签效果。那么就需要 v-html 来设置处理了。

在子组件中使用 v-html 来显示

Vue.component("child", {
props: ['content'],
template: `<div>
    <h1>hello world</h1>
    <div v-html="content"></div>
</div>`
});

页面显示效果如下：

这时候效果是出来了，但是可以看到这样去写其实非常麻烦。而且组件还要被一个 div 包裹才能显示。那么能不能用 template 标签来包括，去掉 div 呢？

尝试使用 template 标签包括，去掉 div

此时页面的显示如下：

也就是说，按照这种方式，我们必须用 div 之类的 html 标签来包裹，然后使用 v-html 才能正常显示了。

但是这种写法体验肯定不好，此时就可以使用插槽 slot 语法。

slot的基本使用

使用插槽 slot 传递父组件的 dom 元素

<child>
    <h2>父组件传递的内容</h2>
</child>

Vue.component("child", {
template: `<div>
    <h1>hello world</h1>
    <slot></slot>
</div>`
});

效果如下：

可以看到直接就显示了html内容，并不需要 div 包裹、 props 参数传递等等。

定义插槽的默认内容

有些情况，可能父组件是不会去传递插槽的内容的，这时候我们就需要给插槽设置一个默认值，如下：

浏览器显示如下：

命名 slot 的基本使用

上面我们解释了slot 的基本使用，这里还有更多的需求在里面。如果，我写一个后台管理页面的内容组件，一般都会分为 header、center、footer 上中下三大区域内容。

其中 header 和 footer 是根据父组件变化的，也就是说可以将这两个区域设置为插槽 slot。下面来实现一下基础效果。

使用多个slot 的基础效果

页面显示如下：

现在是正常显示默认值的，但是，我们怎么针对特定的 slot 设置 dom 元素呢？

尝试直接设置 slot 元素

页面效果如下：

可以看到此时就会同时将所有的 dom 元素传递到全部的 slot 中。当然，这并不是我们想要的效果。

使用命名插槽 slot 解决多个 slot 传递问题

<child>
    <h1 slot="header">header内容</h1>
    <h1 slot="footer">fooster内容</h1>
</child>

Vue.component("child", {
template: `<div>
    <slot name="header">header内容默认值</slot>

    <h1>center中间区域</h1>

    <slot name="footer">footer内容默认值</slot>
</div>`
});

页面效果如下：

可以看到，通过命名 slot，可以将对应的内容放入对应的插槽中。

命名 slot 的更新写法

上面的命名 slot 写法是已经准备舍弃的写法，虽然还可以使用。更新的写法将采用：

在一个 template 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其插槽slot 名称name

<template v-slot:header>
    <h1>header内容</h1>
</template>

<slot name="header">header内容默认值</slot>

修改写法之后的完整代码如下：

<!DOCTYPE html>
<html lang="en" xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="UTF-8">
    <title>Vue中插槽slot</title>
    <!--  1.导入vue.js  -->
    <script src="lib/vue.js"></script>
</head>
<body>

<!-- 2.创建app   -->
<div id="app">

    <child>
        <template v-slot:header>
            <h1>header内容</h1>
        </template>

        <template v-slot:footer>
            <h1>fooster内容</h1>
        </template>

    </child>

</div>

<!-- 3.创建vm   -->
<script>

    Vue.component("child", {
        template: `<div>
            <slot name="header">header内容默认值</slot>

            <h1>center中间区域</h1>

            <slot name="footer">footer内容默认值</slot>
    </div>`
    });

    let vm = new Vue({
        el: "#app",
        data: {},
    })
</script>

</body>
</html>