genScopedSlots() — vue Function Reference

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

Function typescript TemplateCompiler CodeGen calls 3 called by 1

Entity Profile

TemplateCompiler→ CodeGen→ genScopedSlots() — vue Function Reference

Dependency Diagram

graph TD
  e84bda34_0c0c_e448_e78b_daf80c632a02["genScopedSlots()"]
  4ed91472_8abf_1a34_b708_77e5a59ad407["genData()"]
  4ed91472_8abf_1a34_b708_77e5a59ad407 -->|calls| e84bda34_0c0c_e448_e78b_daf80c632a02
  81263c1a_d3f2_36d9_6cee_cb6fa2511d7c["containsSlotChild()"]
  e84bda34_0c0c_e448_e78b_daf80c632a02 -->|calls| 81263c1a_d3f2_36d9_6cee_cb6fa2511d7c
  d777a689_36b5_fe7e_de7e_1c8af4474401["genScopedSlot()"]
  e84bda34_0c0c_e448_e78b_daf80c632a02 -->|calls| d777a689_36b5_fe7e_de7e_1c8af4474401
  512ec924_620b_1629_a6d8_2c612701890f["hash()"]
  e84bda34_0c0c_e448_e78b_daf80c632a02 -->|calls| 512ec924_620b_1629_a6d8_2c612701890f
  style e84bda34_0c0c_e448_e78b_daf80c632a02 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)}` : ``
  })`
}