Your first two examples are binding the <status-view>
component's total
prop to the value of total
in the context of the current template's scope.
Your last example is binding the <status-view>
component's total
prop to the value of {total}
in the context of the current template's scope.
In this case, {total}
is the ECMAScript2015 object initializer shorthand for { total: total }
(an object that has a key total
with a value equal to the value of the total
property).
To make it easier to reason about, let call the component <child>
, the component's prop foo
and the property we are binding bar
.
With quotes:
<child v-bind:foo="bar"></child>
binds the value of the bar
property in the current scope to the child's foo
prop
anything within the quotes will be evaluated as a javascript expression. So v-bind:foo="bar + 1"
(given bar
equals 1
) would bind the value 2
to the child's foo
prop.
I would recommend always binding a property value to a child component's prop this way
Without quotes:
<child v-bind:foo=bar></child>
also binds the value of the bar
property in the current scope to the child's foo
prop
as Roy J pointed out, attribute quotes are optional in HTLM5. So this will be evaluated exactly the same as above. For consistency's sake, I would still use quotes.
As an object:
<child v-bind:foo="{bar}"></child>
binds an object { bar: bar }
to the child's foo
prop
for instace, if bar
equaled 'test'
, the child's foo
prop would be { bar: 'test' }
Here's the documentation for v-bind
.