javascript / expert
Snippet
VNode-Erweiterung über Render-Funktionen
Die manuelle Manipulation von VNodes ermöglicht die Erstellung von Higher-Order Components, die Verhalten oder Stile in Slot-Inhalte injizieren, ohne zusätzliche DOM-Wrapper-Elemente hinzuzufügen. Diese Technik nutzt cloneVNode, um neue Eigenschaften in bestehende virtuelle Knoten zusammenzuführen.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { h, cloneVNode, defineComponent } from 'vue';export const AugmentedWrapper = defineComponent({setup(_, { slots }) {return () => {const defaultSlot = slots.default?.() || [];return defaultSlot.map(vnode =>cloneVNode(vnode, {onVnodeMounted: () => console.log('Node mounted'),class: 'enhanced-vnode'}));};}});
vue
Erklärung
1
slots.default?.()
Führt die Default-Slot-Funktion aus, um das Array der Kind-VNodes abzurufen.
2
cloneVNode(vnode, { ... })
Erstellt eine flache Kopie des VNodes und führt neue Lifecycle-Hooks oder Attribute zusammen.