全局组件与局部组件的根本区别:
全局组件即在实例外部书写,局部组件在实例内部书写
全局组件:
<div id = 'app' v-cloak>
<rabbit></rabbit>
<rabbit></rabbit>
<rabbit></rabbit>
<rabbit></rabbit>
<rabbit></rabbit>
</div>
<script>
Vue.component('rabbit',{ //实例一个新的组件rabbit标签
template:`
<div>
<button @click = 'onclick()'>{{message}}</button>
</div>
`, //书写组件的配置,html内容
data:function(){ //返回组件的数据模型
return{
message:'rabbit'
}
},
methods:{ //定义组件中用到的事件
onclick(){
alert('i am rabbit!');
}
}
})
var app = new Vue({
el:'#app',
})
局部组件:
<div id = 'app' v-cloak>
<rabbit></rabbit>
<rabbit></rabbit>
<rabbit></rabbit>
<rabbit></rabbit>
<rabbit></rabbit>
</div>
<script>
var app = new Vue({ //首先实例化一个div
el:'#app',
components:{ //创建一个新的局部组件rabbit
'rabbit':{
template:`
<div>
<button @click = 'onclick()'>{{message}}</button>
</div>
`, //书写rabbit组件的内容
data:function(){
return{
message:'rabbit'
}
}, //创建组件中需要用到的数据
methods:{
onclick(){
alert('i am rabbit!');
}
} //创建组件中需要用到的事件
}
}
})
这里有一个小的区别,在全局组件中用到的是components,而在局部组件中用到的是component,如果不注意的话就会产生报错。
今天初步了解组件,感觉组件其实就是类似于函数,在一整个项目中会用到很多次所以在vue中把组件实例化方便在html中多次使用,可以优化代码,提高可阅读性。