The render function is often used to pass down the slot, reat uses children, and Vue’s slot (static slot, scope slot) is very convenient.

Slot penetration, there are roughly three ways:


// 1. Access the parent slot in the child component
console.log(this.$parent.$slots)
console.log(this.$parent.$scopedSlots)
// 2. Pass static and scoped slots respectively
render(h) {
  console.log(this.$slots)
  return h('render-com', {
    scopedSlots: {
      // Pass to slot
      default: props= > h('span', props.text)
    }
  }, [...Object.keys(this.$slots).map(slotName= > this.$slots[slotName])]
  )
}
// 3. Pass both the static slot and the scoped slot
render(h) {
  const slots = Object.keys(this.$slots).map(slotName= >
    this._t(slotName, null, { slot: slotName })
  )
  return h('render-com', {
  }, slots
  )
}
Copy the code

Note that the this._t function, named renderSlot, is used to generate a VNode if it is a normal slot, or to generate a VNode if it is a scoped slot, it is used to call the function with props. Since Vue 2.6 there has been a unified integration of slots and slot-scopes so that they are all functions, and all slots can be accessed directly from this.$scopedSlots.

RenderSlot function

/** * Runtime helper for rendering 
      
        */
      
function renderSlot (name, fallback, props, bindObject) {
  var scopedSlotFn = this.$scopedSlots[name];
  var nodes;
  if (scopedSlotFn) { // scoped slot
    props = props || {};
    if (bindObject) {
      if(process.env.NODE_ENV ! = ='production' && !isObject(bindObject)) {
        warn(
          'slot v-bind without argument expects an Object'.this
        );
      }
      props = extend(extend({}, bindObject), props);
    }
    nodes = scopedSlotFn(props) || fallback;
  } else {
    nodes = this.$slots[name] || fallback;
  }

  var target = props && props.slot;
  if (target) {
    return this.$createElement('template', { slot: target }, nodes)
  } else {
    return nodes
  }
}


Copy the code

For more information about slot and slot-scope in Vue, see juejin.cn/post/684490…