Vue.js之slot深度复制详解
前言
在Vue中,slot是一个很有用的特性,可以用来向组件内部插入一些内容。slot就是“插槽”的意思,用大白话说就是:定义组件的时候留几个口子,由用户来决定插入的内容。
例如我们定义一个组件MyComponent,其包含一个slot:
Vue.component('MyComponent', { template: ` <div> <slot></slot> </div> ` })
当调用<MyComponent>123</MyComponent>
时,会渲染为如下DOM结构:
<div> 123 </div>
现在又有新需求了,我们希望调用<MyComponent>123</MyComponent>
时,渲染出这样的DOM结构:
<div> 123 123 </div>
看起来很容易实现,即再为MyComponent添加一个slot:
Vue.component('MyComponent', { template: ` <div> <slot></slot> <slot></slot> </div> ` })
渲染出的结构也确实如你所愿,唯一美中不足的是控制台有一个小小的Warning:
Duplicate presence of slot "default" found in the same render tree
如果你不是强迫症患者,这时候你可以收工安心回家睡觉了。直到有一天你的同事向你抱怨,为什么向MyComponent插入一个自定义组件会渲染不出来?
例如有一自定义组件MyComponent2:
Vue.component('MyComponent2', { template: ` <div>456</div> ` })
当调用<MyComponent><MyComponent2></MyComponent2></MyComponent>
时,预期渲染为如下DOM结构:
<div> <div>456</div> <div>456</div> </div>
为什么不能正常工作呢?估计是前面的那个Warning搞得鬼,通过查询发现在Vue 2.0中不允许有重名的slot:
重名的 Slots 移除
同一模板中的重名 已经弃用。当一个 slot 已经被渲染过了,那么就不能在同一模板其它地方被再次渲染了。如果要在不同位置渲染同一内容,可一用 prop 来传递。
文档中提示可以用props来实现,然而在我的用例中显然是不合适的。经过搜索后,最靠谱的方法是手写render函数,将slot中的内容复制到其他的位置。
将之前的MyComponent改为render函数的方式定义:
Vue.component('MyComponent', { render (createElement) { return createElement('div', [ ...this.$slots.default, ...this.$slots.default ]) } })
在上面的定义中我们插入了两个this.$slots.default,测试下能不能正常工作。然而并没有什么卵用,Vue文档在render函数这一章有以下说明:
VNodes 必须唯一
所有组件树中的 VNodes 必须唯一
这意味着我们不能简单地在不同位置引用this.$slots.default,必须对slot进行深度复制。深度复制的函数如下:
function deepClone(vnodes, createElement) { function cloneVNode (vnode) { const clonedChildren = vnode.children && vnode.children.map(vnode => cloneVNode(vnode)); const cloned = createElement(vnode.tag, vnode.data, clonedChildren); cloned.text = vnode.text; cloned.isComment = vnode.isComment; cloned.componentOptions = vnode.componentOptions; cloned.elm = vnode.elm; cloned.context = vnode.context; cloned.ns = vnode.ns; cloned.isStatic = vnode.isStatic; cloned.key = vnode.key; return cloned; } const clonedVNodes = vnodes.map(vnode => cloneVNode(vnode)) return clonedVNodes; }
上面的核心函数就是cloneVNode()
,它递归地创建VNode,实现深度复制。VNode的属性很多,我并不了解哪些是关键属性,只是参照着Vue的源码一并地复制过来。
基于以上函数,我们更改MyComponent的定义:
Vue.component('MyComponent', { render (createElement) { return createElement('div', [ ...this.$slots.default, ...deepClone(this.$slots.default, createElement) ]) } })
经测试,一切正常。
总结
在Vue 1.0中重名的slots并不会出现什么问题,不知道为什么在2.0中取消了这个功能。我听说React提供了复制Element的标准函数,希望Vue也能提供这个函数,免得大家踩坑。以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
相关文章
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- v-for标签可以用来遍历数组,将数组的每一个值绑定到相应的视图元素中去,下面这篇文章主要给大家介绍了关于在Vue.js中轻松解决v-for执行出错的三个方案,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。...2017-06-15
vue.js页面加载执行created,mounted的先后顺序说明
这篇文章主要介绍了vue.js页面加载执行created,mounted的先后顺序说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-07- 本文主要对介绍利用Vue.js 的递归组件,实现了一个最基本的树形菜单。具有很好的参考价值,下面就跟着小编一起来看下吧...2017-01-09
- 本篇文章主要介绍了详解前后端分离之VueJS前端,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-05-27
- 过滤器,本质上就是一个函数。其作用在于用户输入数据后,它能够进行处理,并返回一个数据结果。下面这篇文章主要给大家介绍了Vue.js中过滤器的相关资料,需要的朋友可以参考借鉴,一起来看看吧。...2017-01-26
- 这篇文章主要为大家详细介绍了Vue.js组件tabs实现选项卡切换效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02
- 对于单页应用,官方提供了vue-router进行路由跳转的处理,这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。...2017-04-03
- 这篇文章主要介绍了学习 Vue.js 遇到的那些坑,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-02-04
- 这篇文章主要为大家详细介绍了vue.js表格分页示例,ajax异步加载数据...2016-10-20
- 这篇文章主要介绍了vue.js实现h5机器人聊天测试版,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16
- 第一次接触神奇的vue.js,主要了解一下v-model、v-if、v-else、v-show、v-for等,感兴趣的小伙伴们可以一起学习一下...2016-12-02
- 这篇文章主要为大家详细介绍了Vue.JS入门教程之事件监听,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
这篇文章主要介绍了Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17- 这篇文章主要为大家详细介绍了Vue.js第三天的学习笔记,vue.js计算属性computed,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02
- 本篇文章主要介绍了vue.js实现仿原生ios时间选择组件实例代码,具有一定的参考价值,有兴趣的可以了解一下。 ...2017-01-09
- 这篇文章主要介绍了Vue.js之slot深度复制的相关资料,文中介绍的很详细,对大家具有一定的参考价值,需要的朋友们来一起看看吧。...2017-03-13
- vue是法语中视图的意思,Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。下面这篇文章主要给大家总结了Vue在开发过程中遇到的疑惑知识点,有需要的朋友可以参考借鉴,下面来一起看看吧。...2017-01-23
- 功能比较简单,在单一html中使用vue.js分页展示数据,并未安装脚手架,或使用相关UI框架,此时需要手写一个分页器,不失为最合理最便捷的解决方案,需要的朋友可以参考下...2020-11-07
- 本文给大家分享的是个人在使用vue.js制作的文章和评论的分页组件,并使用webpack打包起来,这里推荐给大家,有需要的小伙伴可以参考下...2016-07-01