Meituan-Dianping/mpvue · error

" " is a reserved attribute and cannot be used as component…

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.

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.

Appendix: 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)