VNode-Erweiterung über Render-Funktionen

Snippet

VNode-Erweiterung über Render-Funktionen

Diese Technik verwendet Render-Funktionen und cloneVNode, um Kind-Komponenten programmatisch abzufangen und zu modifizieren. Sie ermöglicht das Injizieren von Lifecycle-Hooks oder Klassen in Slot-Inhalte, ohne dass die Kinder spezifische Props bereitstellen müssen.

snippet.js
javascript
export default {
  render() {
    const slots = this.$slots.default?.() || [];
    return h('div', { class: 'wrapper' }, slots.map(vnode => {
      return cloneVNode(vnode, {
        onVnodeMounted: () => console.log('Child ready'),
        class: 'augmented-child'
      });
    }));
  }
};

vue

Erklärung

cloneVNode(vnode, { ... })

Erstellt eine Kopie eines virtuellen Knotens mit zusätzlichen oder überschriebenen Eigenschaften.

onVnodeMounted

Eine interne Vue-Prop, die es ermöglicht, den Lebenszyklus eines VNodes direkt abzufragen.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Verwandt

Aus deiner Bibliothek