CODEWITHSUNDEEP
javascripthtmlvue.js
Ben Carey
Ben Carey

Reputation: 16968

Why does inheritAttrs even exist in Vue?

In Vue, we have the inheritAttrs component option which, when false, will prevent bindings from being applied as attributes to the DOM when not declared as props on the component instance.

For example, consider this:

<some-component :article="article" />

With inheritAttrs set to true (default):

<div article="[object Object]"></div>

With inheritAttrs set to false:

<div></div>

I am trying to understand a) why this is true by default? and b) why it even exists in the first place?

Allowing custom attributes in the DOM encourages less experienced engineers to produce invalid HTML, and as a result, poor quality code. However, I am inclined to trust the experience of the Vue engineers and therefore come to the conclusion that it is, in fact, useful in certain scenarios that I have not yet come across. If there are use cases where this is okay then I would like to know, and if there aren't, why on earth is it there in the first place?

In addition, is there a way to set this globally? I tried the following (didn't work):

Vue.config.inheritAttrs = false;

Upvotes: 2

Views: 1856

Answers (2)

Taylor
Taylor

Reputation: 61

You can use a global mixin to disable this option for all components by default:

Vue.mixin({ inheritAttrs: false })

If you needed to inherit attributes for a particular component, explicity adding inheritAttrs: true would override the global mixin configuration.

Upvotes: 1

Radu Diță
Radu Diță

Reputation: 14211

It has nothing to do with custom HTML attributes. You can to this regardless of inheritAttrs or not.

It is a valuable mechanism when you're writing components that wrap existing HTML elements. Without this, you would need to bind each attribute one by one in your top element.

It is more of a convenience than a necessary features.

Upvotes: 2

Related Questions