extractPropsFromVNodeData() — vue Function Reference

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

Function typescript CoreInstance Reactivity calls 1

Entity Profile

CoreInstance→ Reactivity→ extractPropsFromVNodeData() — vue Function Reference

Dependency Diagram

graph TD
  7b1ecc0f_b742_8636_72e7_fcf6a82f8c1f["extractPropsFromVNodeData()"]
  d782c50f_f916_1903_69a9_a36cbe8097dc["checkProp()"]
  7b1ecc0f_b742_8636_72e7_fcf6a82f8c1f -->|calls| d782c50f_f916_1903_69a9_a36cbe8097dc
  style 7b1ecc0f_b742_8636_72e7_fcf6a82f8c1f 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
}