Use slot-scope to copy slot content in vue

Sometimes our vue component needs to copy the content transmitted by the user.

For example, the carousel components in our project need to use the replicated slots to achieve the cyclic scrolling effect.

The user pays attention to the static effect of the carousel content, and the component is responsible for rolling it up.

Component: & lt; Div class = "horse-lamp" & gt; & lt; Div class = "lamp" & gt; & lt; slot name = "lamps" & gt; & lt;/slot & gt; & lt;/Div & gt; & lt; Div class = "lamp" & gt; & lt; slot name = "lamps" & gt; & lt;/slot & gt; & lt;/Div & gt; User: & lt; carouselwidget & gt; & lt; div slot = "lamps" & gt; 123 & lt;/Div & gt; & lt;/carouselwidget & gt;

This implementation method is fine for initialized data, but does not support dynamic binding of Slot content. This is because

• Vnode is unique in vue
• A vnode is bound to only one dom node.

Therefore, when the Component User declares a node, because only one div is declared, only one vnode is generated in the background, although two divs are generated, however, vnode is bound only to the next Dom. When vnode is modified, only one dom is modified.

Solution: Slot-Scope
Each slot generated using slot-scope data generates a new vnode.

Component: & lt; Div class = "horse-lamp" & gt; & lt; Div class = "lamp" & gt; & lt; slot name = "lamps ": arr = "arr" & gt; & lt;/slot & gt; & lt;/Div & gt; & lt; Div class = "lamp" & gt; & lt; slot name = "lamps": arr = "arr" & gt; & lt;/slot & gt; & lt;/Div & gt; user: & lt; carouselwidget: arr = "info. column "& gt; & lt; Template scope =" slotprops "slot =" lamps "& gt; & lt; component V-for =" (item, index) in slotprops. arr ": Key =" info. ID ": Is =" templates [item. type] ": item =" item "& gt; & lt;/component & gt; & lt;/template & gt; & lt;/carouselwidget & gt;

In this case, the component content is changed, so the component content will be updated simultaneously in two slots.

The vue version used by the project is 2.4.2. The slot-scope syntax of the more advanced vue may be different.

Original article address: 1190000016747615

Use slot-scope to copy slot content in vue