DEV Community

Discussion on: Pass all props to children in Vue

Collapse
 
morficus profile image
Maurice Williams

I sometimes forget about $props in Vue. Your technique seems particularly handy when many "layers" need to reuse the same prop.

In your example above the parent component needed to define a prop only for the sake of passing it down. That can be annoying really quick... One suggestion I have to avoid the redeclaration of props on every level is binding $attrs the same way you're doing with $props.

Collapse
 
jwkicklighter profile image
Jordan Kicklighter

I tried that, but it didn't seem to work for me (unless I did something wrong, which is quite likely). I'll try it again based on how you described it and see if that works because it would be much preferred to my method!

Collapse
 
jwkicklighter profile image
Jordan Kicklighter • Edited

Sure enough, it does! I don't think I tried both v-bind="$props" andv-bind="$attrs"`, which is the trick. I'll update this post!

Collapse
 
nesterow profile image
Anton Nesterov

Thanks! Following also works:
v-bind="{...$props, ...$attrs}"

Thread Thread
 
jwkicklighter profile image
Jordan Kicklighter

That's a great space saver! Thanks 🙂