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