Vue - The Road to Enterprise/

...

/

Pass Classes Explicitly via Props

Pass Classes Explicitly via Props

Learn to avoid the issues in migration while passing the classes or styles to a component.

We'll cover the following...

The $attrs object now contains all attributes passed to a component, including class and style.

Vue 2

In Vue 2, v-bind=" $attrs" forwards all properties that were passed to a component, but not classes and styles, because these get special treatment and are applied to the component’s root element:

Press + to interact
<!-- InputField.vue -->
<template> 
    <label>
       <input type="text" v-bind="$attrs" /> 
    </label>
</template> 
<script>
export default {
  inheritAttrs: false 
}
</script>

When used like this:

Press + to interact
 <InputField id="input-id" class="input-field-class"></InputField>

The InputField component generates this output:

Press + to interact
<label class="input-field-class">
  <input type="text" id="input-id" />
</label>

Run the following code and look at the attrs forwarding example in Vue 2:

Note: The code below may ...