向 Vue 组件传递数值型属性 | 猎人杂货铺

向 Vue 组件传递数值型属性

踩坑

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

问题

最近在写 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
6
> <!-- this passes "5" -->
> <calc additions="5"></calc>
>
> <!-- this passes 5 -->
> <calc :additions="5"></calc>
>

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

HunterX wechat
『猎人杂货铺 • 微信公众号』
0%