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

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

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

查看所有标签

猜你喜欢:

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

Effective Python

Effective Python

布雷特·斯拉特金(Brett Slatkin) / 爱飞翔 / 机械工业出版社 / 2016-1 / 59

用Python编写程序,是相当容易的,所以这门语言非常流行。但若想掌握Python所特有的优势、魅力和表达能力,则相当困难,而且语言中还有很多隐藏的陷阱,容易令开发者犯错。 本书可以帮你掌握真正的Pythonic编程方式,令你能够完全发挥出Python语言的强大功能,并写出健壮而高效的代码。Scott Meyers在畅销书《Effective C++》中开创了一种以使用场景为主导的精练教学方......一起来看看 《Effective Python》 这本书的介绍吧!

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

在线压缩/解压 CSS 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

SHA 加密
SHA 加密

SHA 加密工具