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

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

内容简介:个人理解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插槽的理由是什么》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

我的第一本编程书

我的第一本编程书

[日]平山尚 / 张沈宇 / 人民邮电出版社 / 2016-7 / 79.00元

写这本书之前,作者一直在摸索一种最有利于入门者学编程的方法,并应用到教学当中。经过两年的教学实践,他确信他的方法是有效的,于是便有了这本书。这本书面向的是完全没有接触过编程的读者。作者将门槛设置得非常低,读者不需要懂得变量、函数这些名词(这些名词在书中也不会出现),不需要会英语,完全不需要查阅其他书籍,只需要小学算术水平即可。这本书给初学者非常平缓的学习曲线,有利于为之后的进阶学习打下坚实的基础。一起来看看 《我的第一本编程书》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具