原文网址:Vue--prop传值加不加冒号(v-bind)_IT利刃出鞘的博客-CSDN博客
简介
说明
本文介绍Vue.js在使用prop传值时是否要加v-bind。
结论
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` 。
<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'}")还是变量对象(比如:postObjec,值为{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传递给组件的是字符串常量。