extractPropsFromVNodeData() — vue Function Reference

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

Function typescript VueCore VDom calls 1

Entity Profile

VueCore→ VDom→ extractPropsFromVNodeData() — vue Function Reference

Dependency Diagram

graph TD
  2c4ae5b5_b15e_8c6d_7ec1_57d26fc859fa["extractPropsFromVNodeData()"]
  07c6a400_8fa8_9740_e9a1_447f2eb41bbc["extract-props.ts"]
  2c4ae5b5_b15e_8c6d_7ec1_57d26fc859fa -->|defined in| 07c6a400_8fa8_9740_e9a1_447f2eb41bbc
  6abb57af_3267_6a8a_4067_ae972ebad719["checkProp()"]
  2c4ae5b5_b15e_8c6d_7ec1_57d26fc859fa -->|calls| 6abb57af_3267_6a8a_4067_ae972ebad719
  style 2c4ae5b5_b15e_8c6d_7ec1_57d26fc859fa 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
}