=============== 文章一 =================
前言：有關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傳遞給組件的是字符串常量。
=============== 文章二 =================
下面兩種寫法有本質的區別：
<counter conut="0"></counter> <counter :conut="0"></counter>
父組件向子組件傳值，如果不加:冒號，傳過去的不是數值，而是一個字符串
父組件向子組件傳值，加上:冒號，傳過去的就是一個數值，不是字符串，因為加了:冒號以后引號""里面的內容就是一個js表達式
我們再看一個例子：
<body> <div id="app"> <counter :count="0"></counter> <counter :count="1"></counter> </div> <script> var Counter = { props: ['count'], template: '<div>{{count}}---typeof value: {{typeof count}}</div>' } var vm = new Vue({ el: '#app', data: {}, components: { Counter: Counter } }); </script> </body>
當用:count="xxx"時：
效果：
當用count="xxx"時：
效果：
摘抄自：
https://www.wodecun.com/blog/8030.html
https://blog.csdn.net/dyw3390199/article/details/112397634