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

梁同学de自言自语
  • 436

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所以不需要?

回复
阅读 21.5k
9 个回答

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

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

加冒号,两点:

  • 例如

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

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

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

rightrat
  • 1
新手上路,请多包涵

定义是这样的:

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

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

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

请多看官方文档。

莲子
  • 2
新手上路,请多包涵
加不加冒号其实功能是一致的,就是给子组件传值。只不过加了冒号的传的是动态值,不加的传的是固定值。需要特别说明的是数字是可以通过加冒号的属性来传递的。

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

你知道吗?

宣传栏