genSlot() — vue Function Reference

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

Function typescript TemplateCompiler CodeGen calls 3 called by 1

Entity Profile

TemplateCompiler→ CodeGen→ genSlot() — vue Function Reference

Dependency Diagram

graph TD
  24a4679f_fe1d_7654_49b3_ea4cfe44df1f["genSlot()"]
  ce806ab8_847b_273b_e07c_0a796c2f76ae["genElement()"]
  ce806ab8_847b_273b_e07c_0a796c2f76ae -->|calls| 24a4679f_fe1d_7654_49b3_ea4cfe44df1f
  a9c90cf9_5508_948e_464e_8e694711c96f["genChildren()"]
  24a4679f_fe1d_7654_49b3_ea4cfe44df1f -->|calls| a9c90cf9_5508_948e_464e_8e694711c96f
  d482b9b1_9071_5444_3def_14cd026c403f["genProps()"]
  24a4679f_fe1d_7654_49b3_ea4cfe44df1f -->|calls| d482b9b1_9071_5444_3def_14cd026c403f
  836e9c36_fe18_c1c8_9715_d916891f0517["camelize()"]
  24a4679f_fe1d_7654_49b3_ea4cfe44df1f -->|calls| 836e9c36_fe18_c1c8_9715_d916891f0517
  style 24a4679f_fe1d_7654_49b3_ea4cfe44df1f 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 + ')'
}