向 Vue 组件传递数值型属性

发表于 分类于 阅读次数： Valine： 本文字数： 628 阅读时长 ≈ 1 分钟

踩坑

前端总是多种多样的坑，有时也只能怪自己水平太菜，谁让我只是一个业余的前端工程师呢。

问题

最近在写 Vue 页面时，遇到需要向子组件传递数值型数据的需求。然而似乎子组件总是会把传递的数据当字符串来处理，报错提示：

1
[Vue warn]: Invalid prop: type check failed for num="1". Expected Number, got String.

解决方案

前端坑多，踩坑的人也不少，要相信「自己遇到的问题，别人早就遇到过了」。谷歌了一下，发现 GitHub 上有人遇到相同的 问题，Vue 的作者给出了以下解释：

When you pass a prop without v-bind, it is always interpreted as a plain string (as all attributes are), no matter what its content is.

If you want to pass a literal number, you need use v-bind:

1
2
3
4
5
<!-- this passes "5" -->
<calc additions="5"></calc>

<!-- this passes 5 -->
<calc :additions="5"></calc>

也就是说，如果需要传递数值型数据，需要使用 bind 方法，否则会统一当作字符串来处理。