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.
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!
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.
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!
Sure enough, it does! I don't think I tried both
v-bind="$props" and
v-bind="$attrs"`, which is the trick. I'll update this post!Thanks! Following also works:
v-bind="{...$props, ...$attrs}"
That's a great space saver! Thanks 🙂