Vue组件之字面量语法与动态语法

发表于 | 分类于

定义一个组件：

1
<comp message="1"></comp>  //使用的是字面量语法传递数值
1
2
3
4
5
6
7
8
9
Vue.component('comp',{
           props:['message'],
           template:'<span v-on:click="alertType">{{message}}</span>',
           methods:{
               alertType:function(){
                   alert(typeof this.message);
               }
           }
       });

给组件定义一个函数用于检测传递的数据是什么类型，此处检测到 message 是 string 类型，然而我本意是想传递数值1，即 number 类型。可能会受到双引号影响，觉得去掉双引号就是数字了，其实不然，我不知道去掉双引号是否规范，但是去掉后结果依然是 string。这是字面量语法的结果。

vue规定，如果想传递一个实际的 number，需要使用 v-bind，从而让它的值被当作 JavaScript 表达式计算，然后计算结果赋值：

1
<comp :message="1"></comp>  //用v-bind绑定

此时检测结果为number。

两个例子：

1
<comp message="1+2"></comp>  //1+2

1
<comp :message="1+2"></comp>  //3