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傳遞給組件的是字符串常量。