共计 700 个字符,预计需要花费 2 分钟才能阅读完成。
个人理解 slot 适用的场景是那些可以将多个组件看做一个整体,这个整体会被复用。但其中的一些部分内容不固定。
首先和 v -bind 最大的不同是 v -bind 只能绑定数据,而 slot 可以传入数据、HTML 结构甚至是组件。
其次使用 v -bind 绑定的数据渲染出的 DOM 结构固定,而 slot 的内容类似于 fragement 可以接收任意内容
例如页面的 header|footer 虽然可以看做是一个组件,但是结构固定,即便其中的数据需要动态渲染,也不存在 DOM 结构上的改变,所以不需要使用插槽
另外,一个模态框经常作为一个整体被多次复用,这个模态框中包含类似于关闭按钮、确认取消按钮等组件,但同时也包含一些不固定的内容。比如中间的展示区可以是一个 UL LI 列表、表格、表单、图片甚至是引入另外一个组件。那么,这个不固定的内容就可以用 slot 实现。
其实,如果不使用 slot,也可以实现模态框,那就是每当需要使用模态框时,都要把整个模态框的 DOM 结构复制粘贴一次。再对非固定的内容进行覆写,这不单单带来开发效率的下降,而且如果模态框结构本身包含非组件化的部分,这些非组件化的部分无法实现复用
所以 slot 的使用场景是那些结构上由多个子组件组成,而一些部分内容不固定,可以作为一个整体被复用的结构
使用默认插槽还是具名插槽不过是结构中不固定部分是存在一个还是多个。很多文章强调了插槽可以有默认值。其实这不过是个附加的功能,v-bind 都可以有默认值,插槽当然也可以,这不是使用插槽的主要理由
另外,当你开发的组件一部分内容希望由调用者决定,那么使用插槽是首选
算不上是一篇文章,只是回看 slot 部分后对使用场景的一些随笔,多有错误纰漏,望指正