跳到主要内容

vue中prop传值时加冒号:和不加v-bind区别

管

管理员

前端

2020年07月24日 2,266 次阅读
本页目录

 

前言:有关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传递给组件的是字符串常量。

Related

相关文章

同分类文章 →
2025年06月10日 前端

gemini-2.5-pro-0605 按图生成html效果测试

Gemini 最新推出的 2.5 版本真的有点东西。之前用过不少 AI 辅助写代码的工具,但这次它的&ldquo;图生 HTML&rdquo;功能确实让我眼前一亮&mdash;&mdash;上传一张设计图,它不仅能快速识别布局和元素,还能生成结构清晰、样

2025年03月14日 前端

css flex-1和overflow-hidden结合使用详解:弹性布局与内容溢出控制

在 Flexbox 布局中,flex: 1 和 overflow: hidden 是两个常用的属性,它们组合使用可以有效地控制子元素的尺寸和内容显示。flex: 1 的作用:当子元素设置 flex: 1 时,它会根据 Flex 容器的主轴方向,自动伸缩以填充剩余的可用

2025年03月13日 前端

Vue 3中实现处理后的v-model双向绑定

在Vue 3中,当你需要对v-model传入的值进行处理后再展示或使用时,可以使用计算属性的getter和setter来实现这种处理过程的双向绑定。 实现步骤 接收父组件传递的v-model值 创建计算属性,在getter中处理展示值,在setter中处

WeChat

扫码加我微信

微信二维码