Vue—组件

---

前言

Vue在设计之初借鉴了React框架的组件化编程，将复杂的界面功能封装成一个个的组件，可以大幅提高代码复用率，简化项目编码，提高运行效率。本文简要介绍组件的基本使用。

---

一、概念

模块和组件

• 模块。在之前的网页编程中，我们常常将页面某些具体功能的交互部分单独抽离出来，组成一个个.js文件，再将其引入使用，使得编程细化为一个个的模块，构建一个模块化的应用。
• 而Vue的组件，则是将页面的某些具体功能，包含这个功能的结构html、样式css、交互js，全都单独封装成一个以.vue为后缀的文件，这个文件就是一个组件。最后再由多个组件构成完整的页面。
  
  组件化编程可以大幅提高代码复用率，使得页面结构更加清晰，简化项目编码，提高运行效率。

组件类型分为两类：

• 单文件组件 ：一个文件中只有一个组件
• 非单文件组件：一个文件中包含多个组件。缺点： 模板编写没有提示。没有构建过程，无法将ES6转换成ES5。不支持组件的CSS

实际开发中我们常用 单文件组件 来完成页面构建。

单文件组件.vue

一个功能组件包含了这个功能所具备的结构，样式和交互三大部分，使用标签作为分割。
开发中常用单文件组件，但需要和vue脚手架配合使用。

• < template >页面结构< /template >
• < scripte >交互< /script >
• < style >样式< /style >

一个简单的.vue文件示例：

<template>
	<div class="demo">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="showName">点我提示学校名</button>	
	</div>
</template>

<script>
//const student = Vue.extend({  //组件未暴露，无法引用。
	 export default {          //暴露组件 便于引用
		name:'School',        //组件命名最好与此文件名相同
		data(){
			return {
				name:'光明小学',
				address:'北京'
			}
		},
		methods: {
			showName(){
				alert(this.name)
			}
		},
	}
</script>

<style>
	.demo{
		background-color: orange;
	}
</style>

二、组件的基本使用

组件的使用有三大步骤：创建——注册——编写标签

1、创建组件

注意：

• 组件配置项中没有el 这个配置项 el:‘#root’ 。
• data配置项需写成函数形式 data(){…} 。

除了以上两点，组件中的方法和属性基本与vm中的相同。

• template配置项中可以配置组件结构。

//1、构造一个名为student的组件
const student = Vue.extend({
		    //组件配置相中没有 el 这个配置项
			template:`
				<div>
					<h2>学生姓名：{{studentName}}</h2>
					<h2>学生年龄：{{age}}</h2>
				</div>
			`,
			data(){    //data配置项需用函数形式
				return {
					studentName:'张三',
					age:18
				}
			}
		})

2、注册组件

局部注册

通过components配置项完成局部注册。

//创建vm
		new Vue({
			el:'#root',
			data:{
				msg:'你好啊！'
			},
			//第二步：注册组件（局部注册）
			components:{
				student
			}
		})

全局注册

通过vue.component() 完成全局注册。

//全局注册组件
Vue.component('student',student)

3、编写组件标签

组件准备完毕就可以在结构中使用了。将 组件标签写到结构的对应位置即可。

组件标签的两种写法：

• <组件名></组件名>
• <组件名/> 需要在脚手架中使用，否则会导致后续组件不能渲染

<!-- 准备好一个容器-->
		<div id="root">
			<!-- 第三步：编写组件标签 -->
			<student></student>
		</div>

组件嵌套

由上述内容可知，组件中的方法和属性除了个别项外基本与vm中的相同，那么同样的，组件中也有components 这个配置项。
例：现在需要将学生组件嵌套进学校组件中。
只需在学校组件的components 配置中注册学生组件，就可以完成一个简单的组件嵌套。

	//定义student组件
		const student = Vue.extend({
			name:'student',
			template:`
				<div>
					<h2>学生姓名：{{name}}</h2>	
					<h2>学生年龄：{{age}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'小明',
					age:18
				}
			}
		})
		
		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<student></student>
				</div>
			`,
			data(){
				return {
					name:'光明小学',
					address:'北京'
				}
			},
			//注册组件（局部）
			components:{
				student    //在学校组件中定义学生组件，完成组件嵌套。
			}
		})

---

总结

• 开发中常用单文件组件
• 组件使用的三大步骤：
  1、创建组件 。
  2、注册组件。
  3、编写组件标签。
• 组件没有el配置项；组件data必须写成函数式。此外所有属性及方法与Vue相同。