[Vue] $attrs, you may not know it!

In A project, you might encounter A scenario where component A has nested component B, and component B has nested component C. Now you need to pass data from component A to component C. What do you do?

Two methods come to mind: 1. Use props to pass data from A to B, and then from B to C. 2. Use Vuex.

It’s too cumbersome to pass layers of props, and using Vuex is overkill. $attrs, the main character of this article, will teach you another implementation!

Data passing using props looks like this:

If we do not receive it in the child component via props, the properties that the parent component binds to the child component are added to the root element of the child component

Vue gives us an object, $attrs, to receive properties passed by the parent component that are not received by props.

To pass in all of an object’s properties, Vue provides the syntax sugar v-bind=””.

$attrs =”/props/props “; $attrs =”/props/props “;

Addendum: Because the COMPONENT B (the son component) does not receive props, the parameters passed are added to the root element of the component B. Since we have bound a title property to component B, it will cause the mouse to hover over component B with the title prompt! If we don’t want the component’s root element to inherit these attributes, we can set inheritAttrs: false in the component’s options.