Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Router binds props from nested route to parent component #1191

Closed
jods4 opened this issue Nov 5, 2021 · 2 comments
Closed

Router binds props from nested route to parent component #1191

jods4 opened this issue Nov 5, 2021 · 2 comments

Comments

@jods4
Copy link

jods4 commented Nov 5, 2021

Version

4.0.12

Reproduction link

jsfiddle.net/k8z1vp4b/

Steps to reproduce

In the repro, there are two nested components: Bar -> Foo.
They both have props: true and both components have an id prop.

Because the :id route parameter is at the 2nd level, I would not expect it to "bleed" on the higher level.
This is opposite of regular dataflow and can cause unexpected issues if your top component has these props for other uses in another context.

This creates a brittle base problem. Adding a new prop in the child component can break its parent if the same props existed there.

What is expected?

props defined in nested routes shouldn't be set on parent component.

What is actually happening?

they are.


I am not really set on whether the opposite should happen or not (a parent route prop being set on a child component).
I suppose that could be understandable as it's the regular dataflow direction? Or not? Or maybe make it an explicit option?
Maybe all options are ok.

@posva
Copy link
Member

posva commented Nov 5, 2021

yeah, this is intended. props: true is the convenient pass-all option. You can use a function instead to selectively pass anything you want or even use the v-slot API to pass props.

This creates a brittle base problem. Adding a new prop in the child component can break its parent if the same props existed there.

This is true with regular components but not wih page components because they are used in very specific scenarios and most of the time they are only passed to routes.

@posva posva closed this as completed Nov 5, 2021
@jods4
Copy link
Author

jods4 commented Nov 5, 2021

most of the time they are only passed to routes.

Although the docs explicitly say that props exists to enable their re-use as views and regular component in app.

I agree it's pretty rare. Threw me off for a while though.

(I was also thrown off for a while by the fact that router-view doesn't provide you with your route but a kind of global route object with path being the full matched url. You have to fish into matched[] array but if you consider a structure with multiple nesting levels, it's pretty hard to know which level you're at. Let me know if you want me to open an issue for improvements there.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants