什么是组件，在Vue中，不同功能的代码可单独拆成一个个的组件，以此来区分不同的功能，不同的组件负责不同的更功能，将来需要什么样的功能就调用不同的组件，这样也可以极大的减少单个页面的代码量；

一，全局组件的几种创建方式

<!--如果要使用组件,直接,把组件的名称，以HTML标签的形式，引入到页面中,即可-->
<div id = "app">
	<!--如果组件的名称使用的是驼峰命名，那么页面组件的引用，需按照大写以‘-’符号拆分开-->
	<my-coml></my-coml>
</div>
<script>
	//组件创建方式一
	// 1.1使用Vue.extend来创建全局的Vue组件
	var coml = Vue.extend({
		template: "
这是使用Vue .extend创建的组件
"})
	//1.2使用VUe.component（组件的名称，创建出来的组件模板对象）
	Vue.component(myCom , coml) 
	
	
	//组件创建方式二
	//跳过使用Vue.extend的过程
	Vue.component(myCom , {
		template: "
这是使用Vue .extend创建的组件
"
	}) 
	
	//创建Vue实例,得到ViewModel
	var vm = new Vue({
		el:"#app"
	});
	
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

推荐使用引入template模板的方式

<div id = "app">
	<my-com3></my-com3>
</div>

<template id = "temp">
	<div>
		<h4>这是通过template元素，在外部定义的组件结构，这个方式，有代码的只能提示和高亮</h4>
	</div>
</template >


<script>
	Vue.component ( "myCom3",{ 
		template: '#temp',
	})

	//创建Vue实例,得到ViewModel
	var vm = new Vue({
		el:"#app"
	});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

二， 私有组件的创建

<div id="app2">
	<login></login>
</div>


var vm2 = new Vue({ 
	el: 1#app2,
	data: {},
	methods: {},
	filters: {}, 
	directives: {},
	components: { //定义实例内部私有组件的
		login:{
			template:	'
这是私有的	login	组件
';
		}
	},
	beforeCreate(){},
	created(){},
	beforeMount(){},
	mounted(){},
	beforeUpdate(){}, 
	updated(){},
	beforeDestroy(){},
	destroyed(){}
))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

三，组件的切换v-if

<div id = "app">
	<a href = ''  @click.prevent = 'flag = true'>登录</a>
	<a href = ''  @click.prevent = 'flag = false'>注册</a>
</div>

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



<script>
 Vue.component(login , {
		template: "
登录组件
"
	}) 

 Vue.component(register , {
		template: "
注册组件
"
	}) 

 var vm = new Vue({
		el:"#app",
		data:{
			flag: true
		}
	});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

四，component元素实现组件切换

component 元素可以通过给is属性赋值的方式实现组件切换；

<div id = "app">
	<a href = ''  @click.prevent = "comName = 'login' ">登录</a>
	<a href = ''  @click.prevent = "comName = 'register '">注册</a>
</div>

<component   :is = "comName "></component>



<script>
 Vue.component(login , {
		template: "
登录组件
"
	}) 

 Vue.component(register , {
		template: "
注册组件
"
	}) 

 var vm = new Vue({
		el:"#app",
		data:{
			comName : 'login'
		}
	});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

五，组件切换时候的动画效果

//mode = "out-in" 动画模式先出后进，   注意：给动画定义样式，参考上一篇文章
<transition mode = "out-in">
	<component :is = " " ></component>
</<transition>>
1
2
3
4

六，父子组件之间的传值

6.1 父组件向子组件传值:

  父组件在引用子组件的时候可以通过v-bind来给子组件传值，子组件通过pops[ ]来获取父组件传来的值。

6.2 父组件向子组件传递方法:

  父组件向子组件传递放方法的时候，通过v-on来实现；而子组件通过this.$emit(方法名,‘参数1’，‘参数2’)的方式来触发父组件的方法。

<div id="app2">
	<login v-bind:parentMsg = "msg"  v-on:func123 = "parentMethod"></login>
</div>


var vm2 = new Vue({ 
	el: 1#app2,
	data: {
		msg:'父子组件的msg值'
	},
	methods: {
		parentMethod(data1,data2):{
			console.log("这是父组件的方法,子组件传来的参数1"+data1 +"子组件传来的参数2"+ data2)
		}
	},
	filters: {}, 
	directives: {},
	components: { //定义实例内部私有组件的
		login:{
			template:	'
这是子组件--{{ parentMsg }}
';
			pops:[parentMsg]
			data function:{
				return:{
				}
			}
			methods: {
				sonMethod():{
					//emit意为，触发调用的意思，通过this.$emit的方式来调用父组件的方法，
					this.$emit('func123','需要传给父组件的参数1'，'需要传给父组件的参数2')
				}
		},
		}
	},
))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

6.3，父组件调用子组件的方法和属性：

  Vue不提倡直接操作DOM元素，但是提供了操作DOM元素的方式，ref ，任何vue的标签上只要带ref属性，就可以获取该标签的DOM元素。

<div id = "app">
	<my-com3 res = "sonRef"></my-com3>
</div>

<template id = "temp">
	<div>
		<h4>这是个子组件</h4>
	</div>
</template >


<script>
	Vue.component ( "myCom3",{ 
		template: '#temp',
		data:{
			return:{
				sonMsg:"son msg"
			}
		}
		methods: {
			init(id):{
				console.log("父组件传来的ID:"+id)
			}
		},
	})

	//创建Vue实例,得到ViewModel
	var vm = new Vue({
		el:"#app"
		data:{
		},
		methods: {
			parentMethod():{
				//通过$refs调用子组件的init方法
				this.$refs.sonRef.init(666);
				//通过$refs调用子组件的属性
				let m =this.$refs.sonRef.sonMsg;
			}
		},
	});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41