這篇文章給大家分享的是有關(guān)Vue.js之slot深度復制的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

大同網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、成都響應式網(wǎng)站建設等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)從2013年開始到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選創(chuàng)新互聯(lián)。

前言

在Vue中，slot是一個很有用的特性，可以用來向組件內(nèi)部插入一些內(nèi)容。slot就是“插槽”的意思，用大白話說就是：定義組件的時候留幾個口子，由用戶來決定插入的內(nèi)容。

例如我們定義一個組件MyComponent，其包含一個slot:

Vue.component('MyComponent', {
 template: `
 

  
 
 `
})

當調(diào)用123時，會渲染為如下DOM結(jié)構(gòu)：

 123

現(xiàn)在又有新需求了，我們希望調(diào)用123時，渲染出這樣的DOM結(jié)構(gòu)：

 123
 123

看起來很容易實現(xiàn)，即再為MyComponent添加一個slot:

Vue.component('MyComponent', {
 template: `
 

  
  
 
 `
})

渲染出的結(jié)構(gòu)也確實如你所愿，唯一美中不足的是控制臺有一個小小的Warning：

Duplicate presence of slot "default" found in the same render tree

如果你不是強迫癥患者，這時候你可以收工安心回家睡覺了。直到有一天你的同事向你抱怨，為什么向MyComponent插入一個自定義組件會渲染不出來？

例如有一自定義組件MyComponent2：

Vue.component('MyComponent2', {
 template: `
 
456
 `
})

當調(diào)用時，預期渲染為如下DOM結(jié)構(gòu)：

 
456
 
456

為什么不能正常工作呢？估計是前面的那個Warning搞得鬼，通過查詢發(fā)現(xiàn)在Vue 2.0中不允許有重名的slot:

重名的 Slots 移除

同一模板中的重名 已經(jīng)棄用。當一個 slot 已經(jīng)被渲染過了，那么就不能在同一模板其它地方被再次渲染了。如果要在不同位置渲染同一內(nèi)容，可一用 prop 來傳遞。

文檔中提示可以用props來實現(xiàn)，然而在我的用例中顯然是不合適的。經(jīng)過搜索后，最靠譜的方法是手寫render函數(shù)，將slot中的內(nèi)容復制到其他的位置。

將之前的MyComponent改為render函數(shù)的方式定義：

Vue.component('MyComponent', {
 render (createElement) {
 return createElement('div', [
  ...this.$slots.default,
  ...this.$slots.default
 ])
 }
})

在上面的定義中我們插入了兩個this.$slots.default，測試下能不能正常工作。然而并沒有什么卵用，Vue文檔在render函數(shù)這一章有以下說明：

VNodes 必須唯一

所有組件樹中的 VNodes 必須唯一

這意味著我們不能簡單地在不同位置引用this.$slots.default，必須對slot進行深度復制。深度復制的函數(shù)如下：

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;
}

上面的核心函數(shù)就是cloneVNode()，它遞歸地創(chuàng)建VNode，實現(xiàn)深度復制。VNode的屬性很多，我并不了解哪些是關(guān)鍵屬性，只是參照著Vue的源碼一并地復制過來。

基于以上函數(shù)，我們更改MyComponent的定義：

Vue.component('MyComponent', {
 render (createElement) {
 return createElement('div', [
  ...this.$slots.default,
  ...deepClone(this.$slots.default, createElement)
 ])
 }
})

經(jīng)測試，一切正常。

感謝各位的閱讀！關(guān)于“Vue.js之slot深度復制的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

本文名稱：Vue.js之slot深度復制的示例分析-創(chuàng)新互聯(lián)
鏈接URL：http://weahome.cn/article/deehdh.html