Suppress "Extraneous non-props attributes (prop) were passed to component but could not be automatically inherited because component renders fragment or text root nodes."
What problem does this feature solve?
When conditionally rendering parent component, but still want to keep the children elements, I found the new fragment pattern could meet this need. When deliberately render fragment, I don't want vue to warn the extra props being passed since they might be used by custom-component
. I don't know if there's a better way to achieve this.
<template>
<component :is="condition ? 'custom-component' : 'v-fragment'" prop="prop">
...
</component>
</template>
VFragment.vue
<template>
<slot></slot>
</template>
What does the proposed API look like?
Something like fragmentWarning: false
, sorry, can't come up with a better one.
Using inheritAttrs: false
should suppress the warning:
https://jsfiddle.net/skirtle/637y4au8/
Does that cover your use case?