vue组件学习

一.文章导读

? 前面学习了vue的基础指令，了解了相关的钩子函数，这一章学习vue的组件，组件 (Component) 是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码，组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

菜鸟教程地址：https://www.runoob.com/vue2/vue-tutorial.html

官网学习地址：https://cn.vuejs.org/

入门学习更加推荐菜鸟

二.组件定义

1.全局组件

2.组件驼峰命名

3.组件data数据

		

			
			改变
			{{msg}}
		
		
		
	

4.局部组件

前面已经写个全局指令，全局过滤器，局部过滤器之类的，所以局部组件与全局组件的区别是一样的，局部组件只能在当前实例才能使用

		

			
		
		

			// my-component组件注册不正确 局部组件不能在其他实例中使用
			 
		
		
		
	

注意：组件模板中的内容只允许存在一个根标签，多了的话只会解析第一个

	// 下面模板定义了两个p标签，相当于两个根标签，那么第二个就不会生效
	template: '
{{msg}}
 
{{msg}}

三.组件之间的传值

1.父组件向子组件传值

• 父组件发送的形式是以属性的形式绑定值到子组件身上。
• 然后子组件用属性props接收
• 在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制

		

			
实例中定义的属性内容是: {{pmsg}}
			#### 下面是组件
			
			
			
		
		
		
	

2.子组件向父组件传值

• 子组件用$emit()触发事件
• $emit() 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据
• 父组件用v-on 监听子组件的事件

		

			
{{pmsg}}
			
			
		
		
		
	

3.兄弟组件的传递

• 兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
  • 提供事件中心 var hub = new Vue()
• 传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
• 接收数据方，通过mounted(){} 钩子中 触发hub.$on()方法名
• 销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据

? 简单想象一下兄弟组件,在全局组件中，定义两个全局组件那么这两个组件就是兄弟组件，局部组件也是一样的，在当个实例中可定义多个局部组件组件之间就是兄弟关系

		

			
父组件
			

				销毁事件
			
			
			
		
		
		
	

4.自定义轮播组件

四.组件插槽

• 组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力
• 插槽标签指令
• 在组件的基础上的一个标签

1.匿名插槽

• 没有被name属性修饰的插槽叫匿名插槽

		

			
			
			{{msg}}
		

		
		
	

2.具名插槽

• 被name属性修饰的插槽叫具名插槽

3.作用域插槽

• 父组件对子组件加工处理
• 既可以复用子组件的slot，又可以使slot内容不一致

五.习题练习

1.定义轮播组件

2.dmoe下载

https://gitee.com/li_shang_shan/vue-component-learning-dmeo