How to pass props from parent to grandchild in vue

Question

Instead of hardcoding props, I would love to just pass arbitrary number and types of props from parent to grandchild.

I tried this:

<FileListRenderless v-bind="$props" v-on="$listeners">
<!-- <FileListRenderless :attachments="attachments" :isEditMode="isEditMode" :type="type"> -->

which works nicely, but I still have to define them in props object in child component. How to also abstract assigning to props object of child component as well ?

Answer 1

If you'd rather not define the props explicitly in the child component then you should just pass the props as an object like:

<FileListRenderless :my-props="$props" v-on="$listeners">

This bypasses the prop validations built in. You can do the same thing with your listeners, just manually attaching them on component mount. However, I would recommend you rethink your design if you need to do this. If you have a huge range of possible props then you may want to find a way to abstract certain logic out, make factory components, use directives, or use mixins. There are lots of tools in the Vue toolkit.

Answer 2

Without any more context, I'd recommend passing all props down with v-bind="$props" . as you've done.

You can also use a bus or vuex, but these would create global-level variables, which is not always ideal.