genSlot() — vue Function Reference

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

Function typescript VueCore VDom calls 2 called by 1

Entity Profile

VueCore→ VDom→ genSlot() — vue Function Reference

Dependency Diagram

graph TD
  efff3f4c_82aa_c3e2_8ac7_3524fe9edc87["genSlot()"]
  6a18399e_553e_fef8_6a39_746f79f94bd2["index.ts"]
  efff3f4c_82aa_c3e2_8ac7_3524fe9edc87 -->|defined in| 6a18399e_553e_fef8_6a39_746f79f94bd2
  009d7fc7_09cb_184e_e93c_1f468ff505c0["genElement()"]
  009d7fc7_09cb_184e_e93c_1f468ff505c0 -->|calls| efff3f4c_82aa_c3e2_8ac7_3524fe9edc87
  c685f493_8cd2_1c26_d251_343fbd2a9498["genChildren()"]
  efff3f4c_82aa_c3e2_8ac7_3524fe9edc87 -->|calls| c685f493_8cd2_1c26_d251_343fbd2a9498
  cac71b0e_014c_ebb4_99ba_c0a5c9456dff["genProps()"]
  efff3f4c_82aa_c3e2_8ac7_3524fe9edc87 -->|calls| cac71b0e_014c_ebb4_99ba_c0a5c9456dff
  style efff3f4c_82aa_c3e2_8ac7_3524fe9edc87 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/compiler/codegen/index.ts lines 605–631

function genSlot(el: ASTElement, state: CodegenState): string {
  const slotName = el.slotName || '"default"'
  const children = genChildren(el, state)
  let res = `_t(${slotName}${children ? `,function(){return ${children}}` : ''}`
  const attrs =
    el.attrs || el.dynamicAttrs
      ? genProps(
          (el.attrs || []).concat(el.dynamicAttrs || []).map(attr => ({
            // slot props are camelized
            name: camelize(attr.name),
            value: attr.value,
            dynamic: attr.dynamic
          }))
        )
      : null
  const bind = el.attrsMap['v-bind']
  if ((attrs || bind) && !children) {
    res += `,null`
  }
  if (attrs) {
    res += `,${attrs}`
  }
  if (bind) {
    res += `${attrs ? '' : ',null'},${bind}`
  }
  return res + ')'
}