Vue.js之slot深度复制详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue.js之slot深度复制详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3126字，纯文字阅读大概需要5分钟。

内容图文

前言

在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之slot深度复制详解全部内容，希望文章能够帮你解决Vue.js之slot深度复制详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---