Vue的组件

组件
1使用Vue.extend来创建全局组件，在script中

		Vue.extend({
			template:'<h3>aaa</h3>'	//html结构
		})

2.使用Vue.component(‘name’,extend({}))

Vue.component('组件名',extend({}))

，也可以这样写，只能包含一个根元素,如果组件使用了驼峰名，则在引入的时候使用-

Vue.component('my',{
			template:'<div><h3>aaa</h3><span>sas</span></div>'
		})

3.使用定义组件，template:‘id’,组件中的data数据使用方式和实例中的使用方法一样,但要用data:function({…return})

Vue.component('my1',{
			template:'#tmp',
			//组件中的data数据使用方式和实例中的使用方法一样
			data:function(){
				return {count:0}
			},
			methods:{
				add(){
					this.count++
				}
			}
		})

然后在body中添加template标签

<template id="tmp">
			...
		</template>

组件间的切换
1.使用v-if和v-else组件间切换，如

			<login v-if="flag"></login>
			<reg v-else="flag"></reg>

2 .component 改变is的值来切换

<component :is="组件名"></component>

Vue中，子组件中无法访问到父组件中的data数据，需要在组件中添加props属性

			test:{
					template:'<h3>子组件{{paren}}</h3>',
					//先在数组中定义父组件传递过来的属性
					//props中的数据都是只读的无法赋值
					props:['paren']
				}

然后需要传递的属性需要v-bind绑定

<test :paren="msg"></test>