VNode Augmentation via Render Functions

Snippet

VNode Augmentation via Render Functions

This technique uses render functions and cloneVNode to programmatically intercept and modify child components. It allows injecting lifecycle hooks or classes into slot content without requiring the children to expose specific props.

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

Breakdown

cloneVNode(vnode, { ... })

Creates a copy of a virtual node with additional or overridden properties.

onVnodeMounted

An internal Vue prop that allows listening to the lifecycle of a VNode directly.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

VNode Augmentation via Render Functions

Related