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控制来显示的。

总结：

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

vue 组件插槽solt 的使用相关推荐

【Vue】Vue全家桶（三）Vue组件通信+Vue组件插槽+动画与过渡+使用vue-cli解决Ajax跨域问题
1 Vue组件通信 1.1 组件间通信基本原则不要在子组件中直接修改父组件的状态数据数据在哪, 更新数据的行为(函数)就应该定义在哪 1.2 vue 组件间通信方式 props vue 的自定义事 ...
vue中插槽solt的使用
solt就是插槽默认会把组件中间的内容渲染出来案例: 在app.vue中直接在组件模版里写内容是不会在页面中显示的这个时候就在card子组件里写上solt标签 solt标签就代表根组件里 ...
Vue插槽(solt)简单案例
当前页面向子组件传递的值带有HTML标签等特殊的字符时,传统的标签是无法解析的,这时候就需要用插槽(solt)功能来传递变量值 ItemOne.vue子组件中通过solt定义一个插槽 <temp ...
vue 中的solt插槽
插槽的种类: 插槽分为3种,一种是默认插槽.一种是具名插槽.一种是作用域插槽. 插槽的定义: 在子组件中用 <solt></solt> 划出一块区域用来显示父组件中的页面结构, ...
vue插槽solt ，uni.app
一.什么是插槽? 插槽就是子组件提供给父组件使用的一个占位符,用<slot></solt>表示父组件可以在这个占位符中填充任何模板代码. 二.插槽的用法 1.创建一个子组件,在 ...
Vue动态组件、组件缓存、组件激活和非激活、组件插槽、组件name
一.动态组件如何切换2个组件互斥的显示或者隐藏呢除了v-if 什么是动态组件? 多个组件使用同一个挂载点,并动态切换.这就是动态组件完成一个注册功能页面, 2个按钮切换, 一个填写注册信息, ...
【前端——vue】：过滤器、侦听器、计算属性、vue-cli、vue组件、动态组件、插槽、自定义属性、路由
一.过滤器 1.过滤器Filters(只能在vue2中使用) p标签里面看到的是后面函数的返回值,message相当于作为参数传给后面.竖线代表要调用过滤器. 过滤器函数必须定义到filters节点 ...
Vue第二天学习总结—— Vue全家桶之组件化开发(组件化开发思想、组件注册、Vue调试工具用法、组件间数据交互传递、组件插槽、基于组件的案例——购物车)
(一) 组件化开发思想 1. 现实中的组件化思想体现组件化即是对某些可以进行复用的功能进行封装的标准化工作标准:要想组件能够成功组合在一起,每个组件必须要有标准分治:将不同的功能封装到不同的组件 ...
Vue组件传值及插槽
目录组件传值父组件向子组件传值子组件向父组件传值兄弟组件间传值组件插槽父组件向子组件传递内容具名插槽作用域插槽组件传值父组件向子组件传值组件内部通过props接收传递过来的值,父 ...

vue 组件插槽solt 的使用

场景：

1、DocumentFragment对象是什么？

总结：

vue 组件插槽solt 的使用相关推荐

最新文章

热门文章