1.在组件定义data只能是函数,不能是对象
Vue.component('row',{
data:function () {
return{
content: 'this is function'
}
},
template: '<tr><td>{{content}}</td></tr>'
})
2.Vue组件is特性
因为vue模板就是dom模板,使用的是浏览器原生的解析器进行解析,所以dom模板的限制也就成为vue模板的限制了,要求vue模板是有效的HTML代码片段。但是由于dom的一些html元素对放入它里面的元素有限制,所以导致有些组件没办法放在一些标签中,比如<ul></ul> <select></select><a></a> <table></table>等等这些标签中,所以需要增加is特性来扩展,从而达到可以在这些受限制的html元素中使用。例如:
<table>
<tbody>
<tr is="row"></tr>
</tbody>
</table>
<script>
Vue.component('row',{
data:function () {
return{
content: 'this is function'
}
},
template: '<tr><td>{{content}}</td></tr>'
})
</script>
3.ref
被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs
对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:
<counter ref="one" @change="handleChange"></counter>
<script>
ue.component('counter',{
template: '<div @click="handleClick">{{number}}</div>',
data:function () {
return{
number:0
}
},
methods:{
handleClick:function () {
this.number++;
}
}
})
</script>