diff --git a/packages/runtime-core/__tests__/componentProps.spec.ts b/packages/runtime-core/__tests__/componentProps.spec.ts index f89607c57e0..001e0d5da1a 100644 --- a/packages/runtime-core/__tests__/componentProps.spec.ts +++ b/packages/runtime-core/__tests__/componentProps.spec.ts @@ -301,6 +301,23 @@ describe('component props', () => { }).not.toThrow(TypeError) }) + test('warn absent required props', () => { + const Comp = { + props: { + bool: { type: Boolean, required: true }, + str: { type: String, required: true }, + num: { type: Number, required: true } + }, + setup() { + return () => null + } + } + render(h(Comp), nodeOps.createElement('div')) + expect(`Missing required prop: "bool"`).toHaveBeenWarned() + expect(`Missing required prop: "str"`).toHaveBeenWarned() + expect(`Missing required prop: "num"`).toHaveBeenWarned() + }) + test('merging props from mixins and extends', () => { let setupProps: any let renderProxy: any diff --git a/packages/runtime-core/src/componentProps.ts b/packages/runtime-core/src/componentProps.ts index 89baa373314..91190231fb9 100644 --- a/packages/runtime-core/src/componentProps.ts +++ b/packages/runtime-core/src/componentProps.ts @@ -142,7 +142,7 @@ export function initProps( setFullProps(instance, rawProps, props, attrs) // validation if (__DEV__) { - validateProps(props, instance) + validateProps(rawProps || {}, props, instance) } if (isStateful) { @@ -264,8 +264,8 @@ export function updateProps( // trigger updates for $attrs in case it's used in component slots trigger(instance, TriggerOpTypes.SET, '$attrs') - if (__DEV__ && rawProps) { - validateProps(props, instance) + if (__DEV__) { + validateProps(rawProps || {}, props, instance) } } @@ -462,13 +462,17 @@ function getTypeIndex( /** * dev only */ -function validateProps(props: Data, instance: ComponentInternalInstance) { - const rawValues = toRaw(props) +function validateProps( + rawProps: Data, + props: Data, + instance: ComponentInternalInstance +) { + const resolvedValues = toRaw(props) const options = instance.propsOptions[0] for (const key in options) { let opt = options[key] if (opt == null) continue - validateProp(key, rawValues[key], opt, !hasOwn(rawValues, key)) + validateProp(key, resolvedValues[key], opt, !hasOwn(rawProps, key)) } }