$attrs
includes class
& style
$attrs
now contains all attributes passed to a component, including class
and style
.
class
and style
attributes get some special handling in the Vue 2 virtual DOM implementation. For that reason, they are not included in $attrs
, while all other attributes are.
A side effect of this manifests when using inheritAttrs: false
:
$attrs
are no longer automatically added to the root element, leaving it to the developer to decide where to add them.class
and style
, not being part of $attrs
, will still be applied to the component's root element:<template> <label> <input type="text" v-bind="$attrs" /> </label> </template> <script> export default { inheritAttrs: false } </script>
when used like this:
<my-component id="my-id" class="my-class"></my-component>
...will generate this HTML:
<label class="my-class"> <input type="text" id="my-id" /> </label>
$attrs
contains all attributes, which makes it easier to apply all of them to a different element. The example from above now generates the following HTML:
<label> <input type="text" id="my-id" class="my-class" /> </label>
In components that use inheritAttrs: false
, make sure that styling still works as intended. If you previously relied on the special behavior of class
and style
, some visuals might be broken as these attributes might now be applied to another element.
Migration build flag: INSTANCE_ATTRS_CLASS_STYLE
© 2013–present Yuxi Evan You
Licensed under the MIT License.
https://v3.vuejs.org/guide/migration/attrs-includes-class-style.html