组件（component）是vue.js最强大的功能之一。组件的作用就是封装可重用的代码，通常一个组件就是一个功能体，便于在多个地方都能够调用这个功能体。 每个组件都是Vue的实例对象。 我们实例化的Vue对象就是一个组件，而且是所有组件的根组件

如何使用组件

1.定义组件 cons modal={ template:`` }
2.在父组件中注册组件 components:{modal}
3.在父组件作用域内使用组件

全局定义组件 vue.component(“组件名”,{属性})

	
		
		
		
	
	
		

			
组件
			
拆分项目为多个简单组件,可以降低项目复杂度
			
组件让多人合作团队开发更加快捷
			
组件复用,让项目开发更加便捷
			
			
		
	
	

注意：

1.组件中的data是一个函数，不是对象

2.组件中必须有一个唯一的根元素

3.模板中内容较多时候建议使用模板字符串

步进器实例:

	
		
		
		
	
	
		

			
局部组件
			
			
组件的传参,父组件(vm)向子组件(stepper)传参使用props方式传入
			
props是只读的不能修改
			

			
		
	
	

可以看到,在局部组件中父组件向子组件传了一个参数mynum，
接下来就说一下父组件是如何向子组件传参以及子组件如何向父组件传参的

效果:

步骤总结：
1、父组件定义数据
2、父组件通过属性的方式给子组件传递数据
3、子组件通过props属性接受数据并做参数设置
4、子组件使用传递过来的数据

	
		
		
		
	
	
		

			
			
{{ con }}
		
	
	
	

步骤如下：

1、子组件绑定事件

点击

调用this.$emit方法传递数据，第一个参数是自己定义的事件名，第二个参数是传递的数据

2、父组件监听传递的事件childhandle

3、父组件中对监听的事件做处理，拿到传递的数值再在页面显示或其他处理。

三、组件的插槽 3.1插槽基础用法

 	 
	 	
插槽内容1
  		
插槽内容2
	

注意：

1. 父级的填充内容如果指定到子组件的没有对应名字插槽，那么该内容不会被填充到默认插槽中。

2. 如果子组件没有默认插槽，而父级的填充内容指定到默认插槽中，那么该内容就“不会”填充到子组件的任何一个插槽中。

3. 如果子组件有多个默认插槽，而父组件所有指定到默认插槽的填充内容，将“会” “全都”填充到子组件的每个默认插槽中。

3.2具名插槽

具名插槽其实就是在父组件中添加一个 slot=‘自定义名字’ 的属性，
然后在子组件中的 里面添加 name=‘自定义名字’ 即可
如果父组件中有一部分没有添加 slot 属性，则此处就是默认的插槽，
在子组件中的 直接就是使用的父组件的默认插槽部分

四、轮播图实例

代码如下：

swiper.js

const swiper = {
	template: `
	
	 
		
			
		
	 
		
		
			
		
		
			‹
		
		
			›
		
	
	`,
	props: {
		"gallery": {
		//类型为数组或者对象时,默认值需要有个返回值
			type: Array,
			default () {
				return []
			}
		},
		//传入的current默认显示第几张
		"curent": {
			type: Number,
			default: 3
		},
		//传入的定时器参数
		"interval": {
			type: Number,
			default: 2000
		},
		//传入的name参数,实现轮播图不同的动画效果
		"name":{
			type:String,
			default:"slide"
		}
	},
	data() {
		return {
			current: this.curent,
			cid: null,
			time: this.interval,
		}
	},
	methods: {
		auto() {
			this.cid = setInterval(() => {
				this.current++
				if (this.current >= this.gallery.length) {
					this.current = 0
				}
			}, this.time)
		},
		stop() {
			clearInterval(this.cid)
		},
		//点击span按钮,实现点击第几个按钮显示第几张
		step(index) {
			console.log(index)
			this.current = index - 1
		},
		//点击上一张,让current--
		pre() {
			console.log(this.current)
			if (this.current == 0) {
				this.current = 5
			} else {
				this.current--
			}
		},
		//点击下一张,让current++
		next() {
			if (this.current == 5) {
				this.current = 0
			} else {
				this.current++
			}
		}
	},
	//dom挂载完毕
	mounted() {
		//dom挂载完毕执行auto计时器
		this.auto();
		// this.$refs.xxx 获取节点的最有效方式
		this.$refs.container.addEventListener("mouseover", this.stop);
		// 鼠标移除,开始自动播放
		this.$refs.container.addEventListener("mouseout", this.auto);
		setTimeout(() => {
			//选择到swiper节点下面每张幻灯片的高度
			var swiper = this.$refs.container.querySelector(`.swiper-slide:nth-of-type(${this.curent+1})`)
			console.log(swiper.offsetHeight)
			//设置swiper节点的高度等于每张幻灯片的高度
			this.$refs.container.style.height = swiper.offsetHeight + "px"
		}, 500)

	}
}

swiper.html

	
		
		
		
		
	
	
	
		

			
swiper组件