vue中prop传值时加不加v-bind(冒号:)

用法:

动态地绑定一个或多个特性,或一个组件 prop(属性) 到表达式。

在绑定 class 或 style 特性时,支持其它类型的值,如数组或对象。

在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

由于结果记起来很容易,所以先给出结果:
只有传递字符串常量时,不采用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传递给组件的是字符串常量。

  • 8
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
v-bind指令用于在Vue实现属性的动态绑定。它可以将一个或多个attribute,或者一个组件prop动态绑定到表达式。在Vue,v-bind可以使用简写形式,即使用冒号(:)来代替v-bind指令。例如,可以使用v-bind或者简写形式:来绑定一个img标签的src属性,如下所示: ``` <img v-bind:src="imageSrc"> ``` 或者简写为: ``` <img :src="imageSrc"> ``` 需要注意的是,在属性值内不能直接使用插值操作,例如不能直接写入类似于`<h1 :style="font-size:50px;color:red;">this is test</h1>`的语法。如果想要在元素节点的属性上绑定Vue的data数据,需要使用v-bind指令。例如,可以使用v-bind指令将data的tit数据绑定到h1标签的title属性上: ``` <h1 v-bind:title="tit">this is test</h1> ``` 这样,h1标签的title属性就会与data的tit数据进行绑定,实现了属性的动态更新。 #### 引用[.reference_title] - *1* [【VueVuev-bind的使用](https://blog.csdn.net/weixin_34727238/article/details/106949433)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [Vue的v-bind指令基本用法和介绍](https://blog.csdn.net/qq_41196217/article/details/117253289)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值