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

javascript

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

slots.default?.()

Führt die Default-Slot-Funktion aus, um das Array der Kind-VNodes abzurufen.

cloneVNode(vnode, { ... })

Erstellt eine flache Kopie des VNodes und führt neue Lifecycle-Hooks oder Attribute zusammen.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

VNode-Erweiterung über Render-Funktionen

Verwandt