前言
在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也能提供这个函数,免得大家踩坑。以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。