Vue全局组件与局部组件

全局组件与局部组件的根本区别：

全局组件即在实例外部书写，局部组件在实例内部书写

全局组件：

<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中多次使用，可以优化代码，提高可阅读性。