64. Vue中的插槽slot

需求

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

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

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

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

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

image-20200727075152279

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

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

image-20200727080117148

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

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

image-20200727080219950

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

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

image-20200727080959510

Vue.component("child", {
props: ['content'],
template: `

    
hello world
    

`
});

页面显示效果如下：

image-20200727081044956

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

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

image-20200727081328875

此时页面的显示如下：

image-20200727081356508

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

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

slot的基本使用

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

image-20200727082457083

    
父组件传递的内容


Vue.component("child", {
template: `

    
hello world
    
`
});

效果如下：

image-20200727082608019

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

定义插槽的默认内容

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

image-20200727082744747

浏览器显示如下：

image-20200727082852916

命名 slot 的基本使用

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

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

使用多个slot 的基础效果

image-20200727083609796

页面显示如下：

image-20200727083648482

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

尝试直接设置 slot 元素

image-20200727083827880

页面效果如下：

image-20200727083920846

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

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

image-20200727084157926

    
header内容
    
fooster内容


Vue.component("child", {
template: `

    header内容默认值

    
center中间区域

    footer内容默认值
`
});

页面效果如下：

image-20200727084245341

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

命名 slot 的更新写法

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

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

header内容默认值

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

更多精彩原创Devops文章，快来关注我的公众号：【Devops社群】 吧：

image

image