单文件组件

一、组件

认识组件:
组件可以简单的理解为模块化的单元，Vue组件能够提高代码重用性的。使用组件可以解决频繁更改需求的问题
组件分类
全局组件: 指在不同作用域内均可使用的组件.
局部组件: 指只在定义该组件的作用域内可以使用的组件.
备注: 作用域即Vue对象及管理视图区域.[类似Java中全局变量和局部变量]

定义组件步骤:
第1步: 创建组件
第2步: 绑定组件内容/模板
第3步: 应用组件

全局组件:
格式:

		Vue.component("组件名",{
			template:"组件内容"或"#template的id值"
		})

说明:
1.全局组件的声明,必须编写在任何js方法体之外.
2.组件内容中 有且只有 1个根标签,包裹其他内容.
3.template标签是Vue提供的一个标签,必须声明template标签来定义组件内容.

局部组件:
格式:

	var vm=new Vue({
		省略...,
		components:{
			"局部组件名":{template:"组件内容"或"#template的id值"}
		}
	})

说明:
1.局部组件必须在某个Vue对象中声明
2.组件内容中 有且只有 1个根标签,包裹其他内容
3.template标签是Vue提供的一个标签,必须声明template标签来定义组件内容

作用域:
全局组件可以在任意Vue对象管理的视图区域中使用.
局部组件只能在当前Vue对象管理的视图区域中使用.

使用组件:
1.在Vue对象的管理的视图区域中,编写<组件名>标签即可.本质是将组件内容粘贴到此处.
2.可以使用N次组件.[类似于 声明1个方法,可以调用多次方法进行执行

---

二、组件通信

组件嵌套: [类似标签嵌套]
Vue中支持组件之间的嵌套.当组件发生嵌套时,嵌入的组件[内层]称为子组件,被嵌入的组件[外层]称为父组件.
备注: Vue对象本身就是一种组件,因此声明的局部组件属于Vue对象的子组件.

格式:

var vm=new Vue({
	省略...,
	components:{
		"父组件名":{//Vue中组件名称不支持 驼峰命名法
			template:"父组件模板",
			components:{//定义子组件,语法同上
				"子组件1":{
					template:"子组件模板"
				},
				"子组件2":{
					template:"子组件模板"
				},
				....
			}
		}
	}
})

使用要求:
子组件只能在当前父组件的组件模板中使用.

定义子组件的事件:
第1步: 创建父子组件
按照组件嵌套规则定义即可
第2步: 定义子组件事件
在子组件模板内容中,以Vue指令绑定事件,并指定事件处理函数.
注意: 子组件事件的处理函数,必须来自当前子组件.无法引用外部的父组件的函数.

子组件向父组件传递事件

父组件向子组件传递数据
第1步: 子组件自定义属性

		components:{//子组件: 局部组件
			"子组件名":{//Vue中组件名称不支持 驼峰命名法
				省略...,
				props:["属性名1","属性名2"...] //为当前组件,自定义属性.
			}
		}

第2步: 父组件通过属性,向子组件传递数据
父组件模板内容:
<子组件名 v-bind:属性名=“父组件的数据”></子组件名>

第3步: 在子组件中应用属性值[获得父组件的数据]
在子组件的模板中以{{属性名}}方式引用属性的值

---

三、插槽
插槽:
介绍:
在组件化开发中，虽然使用同1个组件，但是在不同的使用场景中组件的部分内容需要有不同的显示. 因此,需要在组件中预留一个位置,当使用插槽时向该位置添加具体内容.此位置称为插槽（slot）.

1、匿名插槽:
2、具名插槽