浅谈vue中组件的运用

vue组件具有独立性、复用性、简单操作定义一个组件便可省去不必要的麻烦，最终将一个功能封装成一个标签进行使用
组件分为全局组件和局部组件，整个项目经常用到的用全局写法，用到比较少的专供特定页面用的使用局部组件

组件的组成部分：

//button-end组件的名字
Vue.component('button-end',{
	data:function(){
		return{
			//属性的参数
			count:0
		}
	},
	//模板字符串
	template:`<button v-on:click='count++'>点击了{{count}}次</button>`
})

//组件的名称作为标签
<button-end></button-end>

注：
1、组件之间可以进行复用，每个组件之间是独立的
2、component的第二个参数data一定是个函数，不能为对象，data为函数可形成一个闭包的环境，使它内部的参数都是独立的，保证每一个组件都能拥有独立的数据
3、模板字符串中必须要有一个根元素，如果有两个元素为对立，则会报错，如

template:`<button v-on:click='count++'>点击了{{count}}次</button>,
		  <button v-on:click='count++'>点击了{{count}}次</button>`

正确的是

template:`
		<div>
			<button v-on:click='count++'>点击了{{count}}次</button>,
			<button v-on:click='count++'>点击了{{count}}次</button>
		<div>`

4、如果组件的名字是使用驼峰式方法，在使用它的时候，需要转成短横线方式’

以上这种是全局组件，下面来说一下局部组件
全局组件和局部组件的很明显的区别是，全局组件是在Vue全局下component出来的一个实例，局部组件则将全局的Vue去掉，换成声明一个变量var的形式，如：

var hello ={
	data: function() {
		return {
			msg:'helloWorld'
		}
	},
	template:'<div>{{msg}}</div>'
}

然后在components中定义组件名称：

components:{
	//第一个是引入的组件名，第二个是使用该组件时的名称，使用时如果为驼峰法，则要改成短横线方式
	'hello'	: HelloWorld
}

注册局部组件，只能在它的父组件中使用