vue 组件插槽solt 的使用

最近在写项目时接触到了这个组件，所以这次的blog想要记录下当时的问题。

场景：

在列表筛选时，情况一，页面显示出筛选的列表内容，情况二，页面显示“暂无该筛选信息！”，所以想要做出情况二的场景时考虑到了用这个vue的组件的卡槽
所以在代码上我进行了这样的处理

<template slot="empty">
    <span style="font-size: 30px;line-height: 330px;">{{ empty }}</span>
</template>

定义empty 后，在获取列表时使用这个方法

this.emptyText = '暂无该筛选信息!'

然而在测试时发现出现了问题

1、DocumentFragment对象是什么？

DocumentFragment，文档片段接口，一个没有父对象的最小文档对象。它被作为一个轻量版的 Document 使用，就像标准的document一样，存储由节点（nodes）组成的文档结构。与document相比，最大的区别是DocumentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题。

最常用的方法是使用文档片段作为参数（例如，任何 Node 接口类似 Node.appendChild 和 Node.insertBefore 的方法），这种情况下被添加（append）或被插入（inserted）的是片段的所有子节点, 而非片段本身。因为所有的节点会被一次插入到文档中，而这个操作仅发生一个重渲染的操作，而不是每个节点分别被插入到文档中，因为后者会发生多次重渲染的操作。

该接口在 Web 组件（Web components）中也非常有用： 元素在其 HTMLTemplateElement.content 属性中包含了一个 DocumentFragment。

可以使用document.createDocumentFragment 方法或者构造函数来创建一个空的 DocumentFragment。

详情链接地址：Web API 接口参考/DocumentFragment

然后又到官网下查了下solt插槽

官网地址：插槽

当组件渲染的时候， 将会被替换为“Your Profile”。插槽内可以包含任何模板代码。
如果 的 template 中没有包含一个 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。

注意的一点：
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

所以通过这个问题，我又更深刻的了解了这个组件，最后我的问题场景解决办法并没有用slot插槽，而是纯粹的简单的div，通过v-show控制来显示的。

总结：

遇到的问题解决办法有很多，第一个办法行不通，导致我们在它上面花费了很多时间，最后也未必能用这个办法。即使这样我们也是有收获的，因为在这个解决问题的途中，我们又加深了对这个问题的了解，所以我们要不断的尝试，不断积累经验，慢慢的就会孰能生巧啦。