我正在构建一个 Vue 模板，并将 props 传递给组件。我发现决定何时需要括号、引号或不需要括号，将变量向下传递到组件中有点令人困惑。我见过这三个符号：
<status-view v-bind:total=total></status-view>
<status-view v-bind:total="total"></status-view>
<status-view v-bind:total="{total}"></status-view>
这些类型的符号之间究竟有什么区别？
您的前两个示例将<status-view>组件的totalprop绑定到total当前模板范围上下文中的值。
您的最后一个示例是将<status-view>组件的totalprop绑定到{total}当前模板范围上下文中的值。
在这种情况下，{total}是ECMAScript2015对象初始化简写为{ total: total }（具有键的对象total与一个值等于所述值total属性）。
为了更容易推理，让我们调用 component <child>，组件的 propfoo和我们正在绑定的属性bar。
<child v-bind:foo="bar"></child>
将bar当前范围内的属性值绑定到孩子的fooprop
引号内的任何内容都将被评估为 javascript 表达式。因此v-bind:foo="bar + 1"（给定barequals 1）会将值绑定2到孩子的foo道具。
我建议始终以这种方式将属性值绑定到子组件的 prop
<child v-bind:foo=bar></child>
还将bar当前范围内的属性值绑定到子项的fooprop
正如 Roy J 指出的，属性引号在 HTLM5 中是可选的。因此，这将与上述评估完全相同。为了保持一致性，我仍然会使用引号。
<child v-bind:foo="{bar}"></child>
将一个对象绑定{ bar: bar }到孩子的foo道具上
对于instace，如果bar等于'test'，孩子的foo道具会{ bar: 'test' }