vue中prop传值时加不加v-bind(冒号:)
2024-10-09 12:04:55
前言:有关Vue中父组件通过prop传值给子组件时,是否加v-bind的问题,没弄清楚时感觉很乱,弄清楚之后很简单。
由于结果记起来很容易,所以先给出结果:只有传递字符串常量时,不采用v-bind形式,其余情况均采用v-bind形式传递。
传入String类型
传入的值title为一个常量(静态prop)时,不加v-bind(或者:)
<blog-post title="My journey with Vue"></blog-post>
传入的值title为一个变量(动态prop)时,加v-bind(或者:)
<blog-post v-bind:title="titleValue"></blog-post>
传入Number类型
<!-- 无论静态的'42'还是变量totalNumber(动态)的值为42,我们都需要 `v-bind` 来告诉 Vue -->
<blog-post v-bind:total="42"></blog-post>
<blog-post v-bind:total="totalNumber"></blog-post>
传入Boolean类型
<!-- 无论静态的'false'还是变量booleanValue(动态)的值为false,我们都需要 `v-bind` 来告诉 Vue -->
<base-input v-bind:favorited="false">
<base-input v-bind:favorited="booleanValue">
传入一个数组
<!-- 无论静态的'[234, 266, 273]'还是变量commmetArray(动态)的值为[234, 266, 273],我们都需要 `v-bind` 来告诉 Vue -->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
<blog-post v-bind:comment-ids="commmetArray"></blog-post>
传入一个对象
<!-- 无论静态的"{name:'bob'}"还是变量postObject(动态)的值为{name:'bob'},我们都需要 `v-bind` 来告诉 Vue -->
<blog-post v-bind:post="{name:'bob'}"></blog-post>
<blog-post v-bind:post="postObject"></blog-post>
总结
根据以上说明,可以看出只有当字符串以静态/常量形式传递时,才不需要也不能用v-bind传递。为什么不能用v-bind传递呢?我觉得主要是为了区分以下场景
<!-- 此时value为数值,计算1+value的值为25 -->
<blog-post v-bind:value="24"></blog-post>
<!-- 此时value为字符串,计算1+value的值为124 -->
<blog-post value="24"></blog-post>
<!-- 此时value为布尔值 -->
<blog-post v-bind:value="false"></blog-post>
<!-- 此时value为字符串 -->
<blog-post value="false"></blog-post>
对于数组和对象,道理也是一样。即不加v-bind时,vue就认为此时通过prop传递给组件的是字符串常量。
最新文章
- 算法与数据结构(九) 查找表的顺序查找、折半查找、插值查找以及Fibonacci查找
- 基于Eclipse的Hadoop应用开发环境配置
- POJ 2559 Largest Rectangle in a Histogram ——笛卡尔树
- js创建对象的四种方式
- Sqlserver 存储过程
- js,jquery转json的几种方法
- IIS6(Win2003) 使用.net 4.0 后,默认文档失效解决方案。
- ThinkPHP的增、删、改、查
- Struts2的标签库(三)——控制标签
- 如何编写自己的Linux安全检查脚本?
- OracleBulkCopy的批量数据导入
- html 元素添加 class
- php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
- Netty笔记--ByteBuf释放
- HTTP多线程下载+断点续传(libcurl库)
- day6 笔记
- Smali语法
- Python3基础 response.info 服务器返回的header信息
- 【Unity 3D】碰撞检测
- 2017ACM暑期多校联合训练 - Team 6 1011 HDU 6106 Classes (容斥公式)
热门文章
- Redis---SDS(简单动态字符串)
- 文件分享系统(Django)
- [原创]K8一句话密码爆破工具{秒破10万} 支持ASP/PHP/ASPX/JSP/CFM/DIY
- [视频]K8飞刀 ms15022 office漏洞演示动画
- vue教程2-07 微博评论功能
- xamarin android 实现二维码带logo生成效果
- 使用Xutils 3 中遇到的一些问题!!!!
- php数组方法
- 只用一招,让你Maven依赖下载速度快如闪电
- hadoop家族成员