为什么vue组件的属性，有的需要加冒号“:”，有的不用?

Question

如 https://vuxjs.gitbooks.io/vux... 案例所示：

<tab :line-width="2" active-color="#fc378c">
  <tab-item :selected="demo2 === item" 
            v-for="item in list2" 
            @click="demo2 = item"></tab-item>
</tab>

其中:line-width有:前缀，而active-color则不用。
是由于数据类型的关系吗？
比如Boolean+Number类型因为是properties就需要加:，而String因为是attribute所以不需要？

Answer 1

加冒号的，说明后面的是一个变量或者表达式，没加冒号的后面就是对应的字符串字面量

Answer 2

加冒号的是 vue 的 v-bind 语法糖，绑定vue的一个数据；不加冒号的就是HTML的属性，和 onclick="doSth()"是一个意思。

Answer 3

加冒号，两点：

• 例如

export default {
    data(){
        return {
            item: {
                src: 'xxxxx'
            }
        }
    }
}

　<img :src='item.src'>,说明 img标签的src属性是动态的，根据你的data里面的数据而来

　- 另一种，例如你这个tab是一个component,表示你把tab组件的line-width属性赋值了2，通过你的tab组件的props:['line-width']

Answer 4

定义是这样的：

HTML部分：
      min={{min}}, {{typeof min}}<br>
      max={{max}}, {{typeof max}}
props部分：
      min: {
        type: Number,
        default: function () {
          return -1
        }
      },
      max: {
        type: String,
        default: function () {
          return -1
        }
      }

赋值是这样的：

:min="10" max="10"

展示是这样的：

min=10, number
max=10, string

Answer 5

跟数据类型没有关系，属性绑定 跟你的属性是不是动态改变的有关。加冒号绑定在js中动态改变

Answer 6

不加冒号传值为字符串，加冒号说明你传的是一个对象

Answer 7

:是属性绑定

Answer 8

请多看官方文档。

Answer 9

加不加冒号其实功能是一致的，就是给子组件传值。只不过加了冒号的传的是动态值，不加的传的是固定值。需要特别说明的是数字是可以通过加冒号的属性来传递的。

这个传值等式左边的是要传入的属性，等式右边的是要传入的值。而传入的属性往往是我们自定义的任意属性，比如本例中的line-width和active-color，而子组件要识别这样的属性，必定会要其props属性中加以声明。这样等式右边的值便传入子组件中并赋值给其声明的属性skin，就可以供其使用了。