Meituan-Dianping/mpvue · error

"${key}" is a reserved attribute and cannot be used as compo

Error message

"${key}" is a reserved attribute and cannot be used as component prop.

What it means

Fires in the initProps loop when a declared prop key matches a reserved attribute: the check isReservedAttribute(key) (key, ref, slot, is...) or config.isReservedTag for platform-reserved names. Attributes like 'key' and 'ref' carry special meaning in VNode data and cannot be passed as ordinary component props — declaring them as props would collide with Vue's internal patch/allocation mechanisms, so the key is rejected with this dev warning.

Source

Thrown at src/core/instance/state.js:87

  }
}

function initProps (vm: Component, propsOptions: Object) {
  const propsData = vm.$options.propsData || {}
  const props = vm._props = {}
  // cache prop keys so that future props updates can iterate using Array
  // instead of dynamic object key enumeration.
  const keys = vm.$options._propKeys = []
  const isRoot = !vm.$parent
  // root instance props should be converted
  observerState.shouldConvert = isRoot
  for (const key in propsOptions) {
    keys.push(key)
    const value = validateProp(key, propsOptions, propsData, vm)
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      if (isReservedAttribute(key) || config.isReservedAttr(key)) {
        warn(
          `"${key}" is a reserved attribute and cannot be used as component prop.`,
          vm
        )
      }
      defineReactive(props, key, value, () => {
        if (vm.$parent && !isUpdatingChildComponent) {
          warn(
            `Avoid mutating a prop directly since the value will be ` +
            `overwritten whenever the parent component re-renders. ` +
            `Instead, use a data or computed property based on the prop's ` +
            `value. Prop being mutated: "${key}"`,
            vm
          )
        }
      })
    } else {
      defineReactive(props, key, value)
    }

View on GitHub (pinned to 6c5d78ee04)

Solutions

1. Rename the prop to something else (e.g. 'itemKey' instead of 'key', 'reference' instead of 'ref')
2. Pass the special attribute normally (e.g. :key on the component tag) instead of declaring it as a prop
3. Avoid naming props after reserved HTML tags for the active platform

When it happens

Trigger: Thrown at src/core/instance/state.js:87 when the library encounters an invalid state.

Common situations: See trigger scenarios.

AI-assisted analysis of Meituan-Dianping/mpvue@6c5d78ee04 (2026-09-02). Data as JSON: /api/errors/0a3c3f6d20a6f2f8. Report an issue: GitHub.