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