微信号:w3cplus_12

介绍:W3CPLUS是一个前端爱好者的家园,W3CPLUS努力打造最优秀的web 前端学习的站点.

Vue 2.0学习笔记:Vue组件内容分发(slot)

2018-03-23 22:54 大漠

在实际项目开发当中,时常会把父组件的内容与子组件自己的模板混合起来使用。而这样的一个过程在Vue中被称为内容分发。也常常被称为slot(插槽)。其主要参照了当前Web Components规范草案,使用特殊的<slot>元素作为原始内容的插槽。今天主要来学习如何在Vue中使用slot的功能。

先简单的了解一个概念

在深入理解Vue的slot之前,先来简单的了解一个有关于slot的概念,便于后续的学习和理解。

前面也说过了,Vue中的slot源于Web Components规范草案,也被称之为插槽,是组件的一块HTML模板,而这块模板显示不显示,以及怎么显示由父组件来决定。那么,Vue中一个slot最核心的两个问题就出来了:

  • 显示不显示

  • 怎么显示

由于slot是一块模板,因此对于任何一个组件,从模板种类的角度来分,共实都可分为非插槽模板插槽模板。其中非插槽模板指的是HTML模板(也就是HTML的一些元素,比如divspan等构成的),其显与否及怎么显示完全由插件自身控制;但插槽模板(也就是slot)是一个空壳子,它显示与否以及怎么显示完全是由父组件来控制。不过,插槽显示的位置由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块

Vue的编译作用域

简单的了解了slot中的基本概念,从基本概念中可以获知,使用slot会涉及Vue的模板,而Vue的模板在渲染成UI之前是有一个编译过程的,也会存在模板编译作用域一说。理解清楚这部分内容,也更有助于我们理解slot,所以花点时间先简单的理解一下Vue的编译作用域。

在前面的《Vue实例和生命周期》一文中,我们了解了Vue的生命周期相关的知识点,此处不再阐述,上张介绍Vue生命周期的图:

碰到是否有template选项时,会询问是否要对template进行编译:

template编译(渲染成UI)有一个过程。模板通过编译生成AST,再由AST生成Vue的渲染函数,渲染函数结合数据生成Virtual DOM树,对Virtual DOM进行diffpatch后生成新的UI。将上图细化一下,也就是template编译的过程如下图所示:

在深入一点,如下:

有关于Vue中template的渲染的详细过程,可以阅读《Vue的模板》一文。

简理的理解就是Vue中的template编译成浏览器可识的过程会经过不少的过程。言外之意,最终在浏览器中呈现的并不是<template>,而是会解析成标准的HTML,然后将组件的标签替换为对应的HTML片段。用个小示例来举例:

Vue将会通过其自身的编译机制(如前图所示的过程),将<my-component>编译成让浏览器可以识别的HTML代码。可以借助浏览器开发者工具一探究竟:

我的理解是这样的。上面的示例通过new Vue()创建一下人Vue的实例,并且将这个实例挂载到div#app的元素下,然后把组件<my-component>编译成HTML,最终渲染所需要的UI效果。继续用张图来描述这个过程,一图胜过千言万语嘛。

我们要说的是模板编译的作用域,在Vue中,组件是有一个作用域的:组件模板(<template>内的就是组件作用域,而其之外的就不是组件的作用域了,比如上面的示例,my-component组件的作用域就是下面这部分:

组件的模板是在其作用域内编译的,因此组件选项对象中的data也是在组件模板中使用的。如果我们在前面的示例中的Vue实例的组件my-component中同时追加一个display属性:

然后在<my-component>中使用指令v-show="display"

试问,此时display是来源于Vue实例,还是my-component组件呢?答案很简单:display来源于Vue实例。也就是说,在Vue中组件的作用域是独立的:

父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。

通俗地讲,在子组件中定义的数据,只能用在子组件的模板。在父组件中定义的数据,只能用在父组件的模板。如果父组件的数据要在子组件中使用,则需要子组件定义props。有关于这方面的内容可以阅读:

  • 《组件数据传递》

  • 《实现组件数据的双向绑定》

  • 《不同场景下组件间的数据通讯》

简单的了解了Vue编译的作用域之后,咱们接着回到我们今天要聊的主题,Vue的slot

slot大致用法

先来简单的看一下Vue中的slot的使用方法。比如我们有一个类似alert的小组件:

上面的代码在alert组件的模板中指定了一个<slot>元素,并且在该元素中放置了一个默认内容“This is alert box!”。在调用alert组件时,并没有向该组件分发任何内容,这个时候运行的结果如下:

从上面的效果中可以得知:如果父组件未向模板中分发内容(插入内容),则显示插槽中默认内容(前提是slot中设置了默认内容)

接下来,在上面的示例上,做小小的修改,在<alert>使用的时候,插入你想要的内容(也就是指父组件向模板分发内容):

运行上面的代码得到的效果是:

从代码运行的结果可以得知:父组件给模板分发了内容,则分发的内容会替换slot标签。除此之外,假设模板中未设置插槽,父组件依旧向其分发了内容,但最终任何分发的内容都不会显示。比如下图所示:

在介绍编译作用域时,了解到,父组件的内容是在父组件作用域编译,子组件的内容是在子组件作用域编译。而Vue的slot一般用在父组件向子组件分发内容,该内容的编译作用域名为父组件作用域。

继续拿上面的alert组件来举例。在我们的alert组件中,很多时候有多种样式风格,除了info之外,还有successdangerwarning之类。我们可以在父组件的编译时绑定status状态。

最终效果如下:

slot分类

在Vue中,slot也分多种,从Vue的官网中可以获知,其主要分为:单个插槽具名插槽作用域插槽三种。接下来我们借助modal组件为例,看看Vue中的这几种插槽怎么使用。

Web中常见的modal弹框外形长得大致都如下图这样:

单个插槽

在介绍slot大致使用方法的一节中,已经知道了,如果子组件template中没有包含任何一个<slot>时,就算父组件分发再多的内容也将会被丢弃。只有子组件模板只要有一个没有属性的slot(因为在模板中可以有多个带属性的slot,后面的内容会介绍),父组件传入的整个内容片段将插入到slot所在的DOM位置,并将替换掉slot本身。

最初在<slot>中的任何内容都被视为备用内容(也可以在最初的<slot>中不放置任何默认内容)。备用内容在子组件的作用域内编译,并且只有在宿主元素(父组件没有分发任何内容)为空,且没有要插入的内容时才显示备用内容。

如果拿modal来举例,在单个插槽时,整个modal的内容都将需要通过父组件来进行分发。我们可以这样写(可能不太理想,但我们后面会慢慢让她变得更完善):

modal组件的template中,只使用了一个<slot>,这个时候在父组件中使用modal组件时,父组件分发的内容就会替换<slot>中的内容:

最终的效果如下:

这样写感觉是不是怪怪的。我也是这么认为的,这只是为了说明单个slot的使用。接下来我们看看具名插槽。

具名插槽

<slot>可以用一个特殊的属性name来进一步配置父组件如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应slot特性的元素。

仍然可以有一个匿名插槽,它是默认插槽,作为找不到匹配的内容片段的备用插槽。如果没有默认插槽,这些找不到匹配的内容片段将被抛弃。

前面示例写的modal组件使用了一个匿名slot。如果我们使用多个slot时,会让modal组件变得更为灵活。众所周知,对于一个modal组件,其主体结构包括了modal-headermodal-bodymodal-footer(当然,很多时候可能不会同时出现,根据需要选择)。那么在定义modal组件的template时,可以使用三个slot,它们的name属性分别命名为headerbodyfooter

基于上例,把模板修改成:

在使用模板的时候:

其他不变,最终的效果如下:

这个时候,你可以根据你的需要,在使用的时候视项目情况去选择,使用具名的插槽。

在《使用Vue创建Modal组件》一文中,也涉及到了slot的内容,现在回过头来看,将会变得更轻松些。

作用域插槽

作用域插槽是一种特殊类型的插槽,用作一个(能被传递数据的)可重用模板,来代替已经渲染好的元素。

在子组件中,只需将数据传递到插槽,就像你将prop传递给组件一样:

在父级中,具有特殊特性 slot-scope 的 <template> 元素必须存在,表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名,此变量接收从子组件传递过来的 prop 对象:

如果我们渲染上述模板,得到的输出会是:

在 2.5.0+,slot-scope 能被用在任意元素或组件中而不再局限于 <template>

作用域插槽更典型的用例是在列表组件中,允许使用者自定义如何渲染列表的每一项:

列表组件的模板:

slot-scope 的值实际上是一个可以出现在函数签名参数位置的合法的 JavaScript 表达式。这意味着在受支持的环境 (单文件组件或现代浏览器) 中,您还可以在表达式中使用 ES2015 解构:

比如下面这个示例:

如果想进一步的了解slot中的作用域插槽,可以阅读《Vue的作用域插槽》一文。

总结

这篇文章主要学习和了解了Vue中的插槽<slot>。是一个空壳子,它显示与否以及怎么显示完全是由父组件来控制。不过,插槽显示的位置由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块。在写一些组件的时候,slot能帮助我们做很多事情,也能让组件可复用性变得更为灵活。


文章涉及到图片和代码,如果展示不全给您带来不好的阅读体验,欢迎点击文章底部的 阅读全文。如果您觉得小站的内容对您的工作或学习有所帮助,欢迎关注此公众号。





W3cplus.com

————————————

记述前端那些事,引领web前沿


长按二维码,关注W3cplus



 
W3cplus 更多文章 使用Vue制作切口盒子组件 使用perspective和transform实现容器上的悬浮效果 CSS Houdini和CSS Paint API 中国第四届CSS开发者大会来啦,赶紧抢票,相约厦门 分享手淘过年项目中采用到的前端技术
猜您喜欢 瓣呀,模仿网易云音乐的豆瓣开源项目 从为什么 String=String 谈到 StringBuilder 和 S 15年后纳指终创新高,但科技圈的主角早就换了另一拨人 微信 1 亿用户背后的架构揭秘 EQueue - 一个纯C#写的分布式消息队列介绍2