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 Author

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 Author • Edited on

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 Author

That's a great space saver! Thanks 🙂