[Vuejs]-Passing props/attribute to nested component inside custom component

by

5👍

✅

this is a question I had also and I found the solution into this very interesting video from Chris Fritz:

He calls that a transparent wrapper:

So there are two things to deal with, listeners and attributes:

For listeners:

<v-text-field v-on="$listeners"></v-text-field>

For attributes, it’s just a little bit more tricky. By default, Vue passes all the attributes to the root tag of your component. Here, you root tag is a div but you want to pass the attributes to your v-text-field component. You need to use the inheritsAttrs: false into your Vue Component:

export default {
    inheritsAttrs: false
    ...
}

And then use the same technique on your v-text-field component by using:

<v-text-field v-bind="$attrs"></v-text-field>

You should then have something like 

<v-text-field v-on="$listeners" v-bind="$attrs"></v-text-field>

And then you should be able to add whatever you like. Hope this helps!

PS: The video talks about this trick from 21:48

Hope this helps!

👤Hammerbot

Leave a comment