extractPropsFromVNodeData() — vue Function Reference

Architecture documentation for the extractPropsFromVNodeData() function in extract-props.ts from the vue codebase.

Function typescript CoreRuntime InstanceState calls 1

Entity Profile

CoreRuntime→ InstanceState→ extractPropsFromVNodeData() — vue Function Reference

Dependency Diagram

graph TD
  3dded016_b1bc_eb89_7c3f_4a6c756e9711["extractPropsFromVNodeData()"]
  6df65a4c_84fa_c2da_0000_4ef009d1eb0a["checkProp()"]
  3dded016_b1bc_eb89_7c3f_4a6c756e9711 -->|calls| 6df65a4c_84fa_c2da_0000_4ef009d1eb0a
  style 3dded016_b1bc_eb89_7c3f_4a6c756e9711 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/vdom/helpers/extract-props.ts lines 12–50

export function extractPropsFromVNodeData(
  data: VNodeData,
  Ctor: typeof Component,
  tag?: string
): object | undefined {
  // we are only extracting raw values here.
  // validation and default values are handled in the child
  // component itself.
  const propOptions = Ctor.options.props
  if (isUndef(propOptions)) {
    return
  }
  const res = {}
  const { attrs, props } = data
  if (isDef(attrs) || isDef(props)) {
    for (const key in propOptions) {
      const altKey = hyphenate(key)
      if (__DEV__) {
        const keyInLowerCase = key.toLowerCase()
        if (key !== keyInLowerCase && attrs && hasOwn(attrs, keyInLowerCase)) {
          tip(
            `Prop "${keyInLowerCase}" is passed to component ` +
              `${formatComponentName(
                // @ts-expect-error tag is string
                tag || Ctor
              )}, but the declared prop name is` +
              ` "${key}". ` +
              `Note that HTML attributes are case-insensitive and camelCased ` +
              `props need to use their kebab-case equivalents when using in-DOM ` +
              `templates. You should probably use "${altKey}" instead of "${key}".`
          )
        }
      }
      checkProp(res, props, key, altKey, true) ||
        checkProp(res, attrs, key, altKey, false)
    }
  }
  return res
}