Vue的组件属性：components

使用场景

一般在项目的使用过程中，某个需要多次使用的模块，会将整个模块抽取出来，写一个组件，供给其他页面进行调用或者是在一个页面中，多次使用到一个重复的代码样式，将其抽取出来，用组件来代替，以实现代码的复用性。

组件又分为局部注册组件和全局注册组件

全局注册组件：指的是在任何一个页面都可以进行使用的组件，例如：头部、底部

局部注册组件：本页面进行复用的代码样式 ，例如：页面中的活动模块

全局注册组件使用方法：

<script type="text/javascript">

	//自定义组件，counter是组件的名称
	
	var counter = {
	
	template: "<button @click='num++'>你已经点击了{{num}}次</button>",
	
	//在组件中，data必须是返回值的函数，而不是属性，所以要用data()，且用return返回数据
	
		data(){
		
			return {num:0}
		
		}
	
	}
	
	//全局注册组件,第一个是参数名字，第二个是组件名字
	
	//“”内的counter是组件的名字，也可以用其他名字，第二个counter是指代上面的组件
	
	Vue.component("counter",counter);

</script>

----------------------------------------------------------------------

局部注册组件使用方法：

<script type="text/javascript">

	//自定义组件
	
	var counter = {
	
	template: "<button @click='num++'>你已经点击了{{num}}次</button>",
	
		data(){
		
			return {num:0}
		
		}
	
	}

	var vm=new Vue({
	
		el:"#app",
		
		//局部注册组件,第一个counter是组件的名字，第二个counter是上面组件的名字
		
		components:{
		
			counter: counter
		
		}
	
	});
</script>

效果为：每点击一次按钮，则num+1，意味着按钮里面的文字发生改变，也就变成了

你已经点击了0次

你已经点击了1次

你已经点击了2次

结束啦~