Question

我正在构建一个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>

这些类型的符号之间究竟有什么区别？

Answer 1

您的前两个示例是将<status-view>组件的total道具绑定到当前模板范围上下文中total的值。

您的上一个示例是将<status-view>组件的total道具绑定到当前模板范围上下文中{total}的值。

在这种情况下，{total}是{ total: total }的{{3}}（一个键total的对象，其值等于{{1}的值} property。。

为了便于推理，请调用组件total，组件的支柱<child>以及我们绑定的属性foo。

bar

将当前范围中<child v-bind:foo="bar"></child>属性的值绑定到子级bar道具
引号内的任何内容都将被评估为javascript表达式。因此foo（给定v-bind:foo="bar + 1"等于bar）会将值1绑定到孩子的2道具。
我建议始终将属性值绑定到子组件的支持

foo

还会将当前范围中<child v-bind:foo=bar></child>属性的值绑定到子级bar道具
正如Roy J所指出的，ECMAScript2015 object initializer shorthand。所以这将与上面完全相同的评估。为了保持一致性，我仍然会使用引号。

foo