vue中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` 來告訴 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傳遞給組件的是字符串常量。