Vue--prop传值加不加冒号（v-bind）

Myth丶恋晨 2022-09-03 10:27 138阅读 0赞

首发网址：[Vue--prop传值加不加冒号（v-bind）\_IT利刃出鞘的博客-CSDN博客][Vue--prop_v-bind_IT_-CSDN]

# 其他网址 #

[vue中prop传值时加不加v-bind（冒号：）][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>

# 传入一个对象 #

<blog-post v-bind:post="{name:'bob'}"></blog-post>
    <blog-post v-bind:post="postObject"></blog-post>

# 总结 #

根据以上说明，可以看出只有当字符串以静态/常量形式传递时，才不需要也不能用v-bind传递。为什么不能用v-bind传递呢？我觉得主要是为了区分以下场景

<blog-post v-bind:value="24"></blog-post>
    
    
    <blog-post value="24"></blog-post>

<blog-post v-bind:value="false"></blog-post>
    
    
    <blog-post value="false"></blog-post>

对于数组和对象，道理也是一样。即**不加v-bind时，vue就认为此时通过prop传递给组件的是字符串常量。**

[Vue--prop_v-bind_IT_-CSDN]: https://knife.blog.csdn.net/article/details/119464536
[vue_prop_v-bind]: https://juejin.cn/post/6844903881990733831