genScopedSlots() — vue Function Reference

Architecture documentation for the genScopedSlots() function in index.ts from the vue codebase.

Function typescript CompilerSFC ScriptCompiler calls 3 called by 1

Entity Profile

CompilerSFC→ ScriptCompiler→ genScopedSlots() — vue Function Reference

Dependency Diagram

graph TD
  d1ccd3d8_f5cf_7075_df2f_38965de3798e["genScopedSlots()"]
  37199ba4_dbb1_d3e4_1b99_701b07750519["genData()"]
  37199ba4_dbb1_d3e4_1b99_701b07750519 -->|calls| d1ccd3d8_f5cf_7075_df2f_38965de3798e
  29ffbd64_5bc4_bf0c_1997_243862094926["containsSlotChild()"]
  d1ccd3d8_f5cf_7075_df2f_38965de3798e -->|calls| 29ffbd64_5bc4_bf0c_1997_243862094926
  957c0d47_da61_bbd7_c2c0_6ec005373124["genScopedSlot()"]
  d1ccd3d8_f5cf_7075_df2f_38965de3798e -->|calls| 957c0d47_da61_bbd7_c2c0_6ec005373124
  2fb8bf00_67c9_cf78_19b1_d618446f8123["hash()"]
  d1ccd3d8_f5cf_7075_df2f_38965de3798e -->|calls| 2fb8bf00_67c9_cf78_19b1_d618446f8123
  style d1ccd3d8_f5cf_7075_df2f_38965de3798e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/compiler/codegen/index.ts lines 413–468

function genScopedSlots(
  el: ASTElement,
  slots: { [key: string]: ASTElement },
  state: CodegenState
): string {
  // by default scoped slots are considered "stable", this allows child
  // components with only scoped slots to skip forced updates from parent.
  // but in some cases we have to bail-out of this optimization
  // for example if the slot contains dynamic names, has v-if or v-for on them...
  let needsForceUpdate =
    el.for ||
    Object.keys(slots).some(key => {
      const slot = slots[key]
      return (
        slot.slotTargetDynamic || slot.if || slot.for || containsSlotChild(slot) // is passing down slot from parent which may be dynamic
      )
    })

  // #9534: if a component with scoped slots is inside a conditional branch,
  // it's possible for the same component to be reused but with different
  // compiled slot content. To avoid that, we generate a unique key based on
  // the generated code of all the slot contents.
  let needsKey = !!el.if

  // OR when it is inside another scoped slot or v-for (the reactivity may be
  // disconnected due to the intermediate scope variable)
  // #9438, #9506
  // TODO: this can be further optimized by properly analyzing in-scope bindings
  // and skip force updating ones that do not actually use scope variables.
  if (!needsForceUpdate) {
    let parent = el.parent
    while (parent) {
      if (
        (parent.slotScope && parent.slotScope !== emptySlotScopeToken) ||
        parent.for
      ) {
        needsForceUpdate = true
        break
      }
      if (parent.if) {
        needsKey = true
      }
      parent = parent.parent
    }
  }

  const generatedSlots = Object.keys(slots)
    .map(key => genScopedSlot(slots[key], state))
    .join(',')

  return `scopedSlots:_u([${generatedSlots}]${
    needsForceUpdate ? `,null,true` : ``
  }${
    !needsForceUpdate && needsKey ? `,null,false,${hash(generatedSlots)}` : ``
  })`
}