Thank you for explaining this.
Why do you need both v-bind="$props" and v-bind="$attrs" ? Why not only v-bind="$attrs"? Isnt v-bind="$attrs" taking care of what v-bind="$props" takes care of as well?
Hey Malin, that's a great question! In Vue, $attrs is an object containing all attributes that are not declared as props. $props contains the attributes that are declared as props. So you must bind both if there are both prop values and non-prop values that you need to pass to the child.
For example:
Component A has 1 prop called "prop"
Component B has 2 props, "prop" and "childOnly"
Component B is a child of Component A
We put down and instance of Component A like so: <component-a :prop="propVal" :child-only="childOnlyVal" />
In that example, if we inspect the instance of Component A, we will see:
$props: { prop: propVal }
$attrs: { childOnly: childOnlyVal }
This is because childOnly is not declared as a prop in the definition of Component A.
,,,think I got it thanks to your reply -- so, the parent only regards its own declared props as props and puts them into $props. All other arguments, which are passed into to parent but unknown by the parent, are dumped into $attr. :)
Yep, that's a good way to put it! Your origin question is how I assumed Vue worked, but after working on the sample in the Codepen I realized that $attrs and $props were separate.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Thank you for explaining this.
Why do you need both v-bind="$props" and v-bind="$attrs" ? Why not only v-bind="$attrs"? Isnt v-bind="$attrs" taking care of what v-bind="$props" takes care of as well?
Hey Malin, that's a great question! In Vue,
$attrsis an object containing all attributes that are not declared as props.$propscontains the attributes that are declared as props. So you must bind both if there are both prop values and non-prop values that you need to pass to the child.For example:
<component-a :prop="propVal" :child-only="childOnlyVal" />In that example, if we inspect the instance of Component A, we will see:
$props: { prop: propVal }$attrs: { childOnly: childOnlyVal }This is because childOnly is not declared as a prop in the definition of Component A.
Hopefully that makes sense!
,,,think I got it thanks to your reply -- so, the parent only regards its own declared props as props and puts them into $props. All other arguments, which are passed into to parent but unknown by the parent, are dumped into $attr. :)
Yep, that's a good way to put it! Your origin question is how I assumed Vue worked, but after working on the sample in the Codepen I realized that $attrs and $props were separate.