-
-
Notifications
You must be signed in to change notification settings - Fork 33.7k
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
v-bind="$props" injects inappropriate attributes into children #5606
Comments
This is expected behavior. If you don't want this you need to either explicitly bind parent props or declare the props in the child. |
@yyx990803 in the linked example props are declared in the child but the problem persists. Until 2.1.0 was working with v-bind.prop as documentation says https://vuejs.org/v2/api/#v-bind |
I got what do you mean with "...declare the props in the child", you say ALL props it might receive. But this would force to declare input props for a button for example (and vice versa), which is not a good pattern |
@dotBits <Test v-bind="$props"></Test>
<Test v-bind="{ a, b }"></Test>
<Test :a="a" :b="b"></Test> If you bind Also, I don't understand what you mean by it was workinng until 2.1.0 because |
@posva the problem is when you have 2 or more children components at the same level, they can have different props but they receive the whole set of props and what is not declared as prop in the child, will be an HTML attribute of that child element // Form $props are { a: 'x', b: 'y', c: {foo: 'bar'} }
<Form>
// Input has just { props: {a: String} } but HTML attributes are rendered with b="y" c="[Object object]"
<Input v-bind="$props"></Input>
// Button has just { props: {b: String, c: Object} } but HTML attributes are rendered with a="x"
<Button v-bind="$props"></Button>
</Form> We're implementing a components pattern library based on Atomic design system (Brad Frost), which means to include even small elements (like buttons and call to actions) in dozens of different context with more than 3 or 4 nested levels. Yes you're right, the last working version with .prop modifier is 2.2.0-beta.1 I've created a fiddle which reproduces behavior with this version http://jsfiddle.net/cdev/uk2v3qfe/1/ |
Oh, I see, you seem to have misunderstood the <Test :a="a" :b="b"></Test> And that is going to produce wrong markup. Keep in mind ignoring other pops in |
@posva got it. I'm about to try with a custom directive to filter only owned props, any suggestion on how to approach it? |
No, I suggest you to explicitly bind the props you need 😛 |
Version
2.3.2
Reproduction link
http://jsfiddle.net/cdev/g83wrcu9/4/
Steps to reproduce
What is expected?
Only props defined in children should be used, the others should be ignored, at least not injected as HTML attributes because they turn markup as invalid
What is actually happening?
Props not defined in child component are injected as attributes and this invalidates HTML markup
The text was updated successfully, but these errors were encountered: