vue组件

组件的定义: 方便代码的书写，需要什么就将什么组件加入到自己的项目中去，更好的规范化项目结构（注意什么是组件化什么是模块化，一个是针对代码，一个是针对UI）
组件的创建三种方式：
1.使用Vue.extend来创建组件

var com1 = Vue.extend({
	template:'<h1>这是创建组件的第一种方式</h1>'
})
Vue.component('myCom',com1)

2.不用创建变量直接创建组件

Vue.component('com1',Vue.extend({
	template:'<h1>这是创建的第二种方式</h1>'
}))

3.直接创建方式

Vue.component('mycom',{
	template:'<h1>这是直接创建方式</h1>'
})

4.使用外部模板创建方式

<mycom></mycom>
//模板
<template id='"com1">
	<h1>这是使用的模板创建的</h1>
</template>
//先创建一个模板id
Vue.component('mycom',{
	template:'#com1'
})

5.创建私有组件
在自己控制的div里面创建组件，然后再script外面创建组件，最后在控制区域写入自己的组即可

//1.自己的控制区域
components:{
	login:{
	template:"#com"
}
}
//2.在script外面创建模板
<template id="com">
	<div>
		<h1>这是模板创建的</h1>
	</div>
</template>
//3.在最终的控制区域写入自己的模板即可
<login></login>

组件传值
首先创建自己的组件，自己的组件里面自己传值实例

 // 1. 组件可以有自己的 data 数据
    // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法
    // 3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
    // 4. 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!
Vue.component('com1',{
	template:'<h1>这是自己的组件中的内容+++++{{msg}}</h1>',
	data:function(){
		return {
			msg:'我是组件自己的内容'
		}
	}
})