在VUE中你使用slot插槽的理由是什么

栏目: 编程语言 · 发布时间: 7年前

内容简介:个人理解slot适用的场景是那些可以将多个组件看做一个整体,这个整体会被复用。但其中的一些部分内容不固定。首先和v-bind最大的不同是v-bind只能绑定数据,而slot可以传入数据、HTML结构甚至是组件。其次使用v-bind绑定的数据渲染出的DOM结构固定,而slot的内容类似于fragement可以接收任意内容

个人理解slot适用的场景是那些可以将多个组件看做一个整体,这个整体会被复用。但其中的一些部分内容不固定。

首先和v-bind最大的不同是v-bind只能绑定数据,而slot可以传入数据、HTML结构甚至是组件。

其次使用v-bind绑定的数据渲染出的DOM结构固定,而slot的内容类似于fragement可以接收任意内容

例如页面的header|footer虽然可以看做是一个组件,但是结构固定,即便其中的数据需要动态渲染,也不存在DOM结构上的改变,所以不需要使用插槽

另外,一个模态框经常作为一个整体被多次复用,这个模态框中包含类似于关闭按钮、确认取消按钮等组件,但同时也包含一些不固定的内容。比如中间的展示区可以是一个UL LI列表、表格、表单、图片甚至是引入另外一个组件。那么,这个不固定的内容就可以用slot实现。

其实,如果不使用slot,也可以实现模态框,那就是每当需要使用模态框时,都要把整个模态框的DOM结构复制粘贴一次。再对非固定的内容进行覆写,这不单单带来开发效率的下降,而且如果模态框结构本身包含非组件化的部分,这些非组件化的部分无法实现复用

所以slot的使用场景是那些结构上由多个子组件组成,而一些部分内容不固定,可以作为一个整体被复用的结构

使用默认插槽还是具名插槽不过是结构中不固定部分是存在一个还是多个。很多文章强调了插槽可以有默认值。其实这不过是个附加的功能,v-bind都可以有默认值,插槽当然也可以,这不是使用插槽的主要理由

算不上是一篇文章,只是回看slot部分后对使用场景的一些随笔,多有错误纰漏,望指正


以上所述就是小编给大家介绍的《在VUE中你使用slot插槽的理由是什么》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。

SRE

SRE

贝特西 拜尔 (Betsy Beyer)、等 / 孙宇聪 / 电子工业出版社 / 2016-10-1 / CNY 108.00

大型软件系统生命周期的绝大部分都处于“使用”阶段,而非“设计”或“实现”阶段。那么为什么我们却总是认为软件工程应该首要关注设计和实现呢?在《SRE:Google运维解密》中,Google SRE的关键成员解释了他们是如何对软件进行生命周期的整体性关注的,以及为什么这样做能够帮助Google成功地构建、部署、监控和运维世界上现存最大的软件系统。通过阅读《SRE:Google运维解密》,读者可以学习到......一起来看看 《SRE》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换