2.Vue组件

2.组件

2.1.模块与组件

2.1.1.模块

可以向外提供某一个功能的js程序，一般为一个js文件

作用：js可以复用，可以简化js的编写，提高js的运行效率。

2.1.2.组件

实现某一个功能的效果代码集合，这个集合包含很多，比如html、css、js等

作用：复用编码，简化项目的编码，提高项目的运行效率

2.1.3.模块化与组件化

当应用中的js都以模块来编写的, 那这个应用就是一个模块化的应用。

当应用中的功能都是以组件的方式来编写的, 那这个应用就是一个组件化的应用,。

2.2.非单文件组件

指将vue组件写在html代码中的组件

效果图

他们两个的student组件互不影响，即使改了上面的age，但是下面的还是原来的数据

代码示例

总结

1. 定义组件
   • Vue.extend(options)，其中options和new Vue(Options)的几乎一致，不同点如下：
     1. el不用写，因为最终所有的 组件都要经过一个VM的管理，由VM中的el决定服务哪个容器。
     2. data必须写成函数，因为可以避免组件被复用时，数据存在引用关系。
   • 备注：使用template可以配置组件的结构
2. 注册组件
   1. 局部注册：靠new Vue中的components选项。
   2. 全局注册：靠Vue.component('组件名',组件标签名)
   3. 注意：全局注册中的component不带s
3. 使用组件：直接使用标签即可，标签名为组件标签名

注意：将new Vue()写在Vue.component的前面会无法显示，必须写在他的后面

2.3.注意点

关于组件名

1. 一个单词组成
   1. 第一种写法(首字母小写)： school
   2. 第二种写法(首字母大写)： School
2. 多个单词组成
   1. 第一种写法(kebab-case命名)： my-school
   2. 第二种写法(CamelCase命名)： MySchool (需要Vue脚手架支持)
3. 备注
   1. 组件名尽可能回避HTML中已有的元素名称，例如： h2、H2都不行。
   2. 可以使用name配置项指定组件在开发者工具中呈现的名字。

关于组件标签

1. 第一种写法：<school></school>
2. 第二种写法：<school/>
3. 备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

一个简写方式：const school = Vue.extend(options) 可简写为： const school = options

2.4.组件嵌套

效果图

代码示例

使用方法

1. 定义学生组件
2. 定义学校组件，在学校组件中添加components方法，将学生组件嵌套（注册）进来，学生组件与学校组件是父子关系
3. 定义hello组件，hello组件与学校组件是平级关系
4. 定义APP组件，这个组件在所有组件之上，仅在VM之下，所以将学校组件和hello组件嵌套（注册）进来
5. 注册组件，此时所有的组件都被app组件进行管理，所以只需要注册app组件即可

2.5.VueComponent

组件本质：是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建组件的实例对象,即Vue帮我们执行的 new VueComponent(options)。

特别注意： 每次调用Vue.extend，返回的都是一个全新的VueComponent!!!!

关于this指向

1. 组件配置中：data、methods、watch、computed，它们函数中的this均是VueComponent实例对象
2. new Vue(options)配置中：data、methods、watch、computed，它们函数中的this均是Vue实例对象

VueComponent的实例对象，以后简称vc (组件实例对象) 。
Vue的实例对象，以后简称vm。

VM与VC的区别：除了上面2.2中的以外，最大的区别就是VC可以复用

2.6.单文件组件

各个文件的作用

1. main.js：注册App组件以及创建vue实例

   

2. app.vue：一切组件的爹，所有组件都有他进行管理

   

3. 其他的.vue文件：就是普通的组件，里面可以编写某一个功能的脚本代码，css代码，html代码等

   school组件	student组件

4. index.html：页面的开始

   

在下一个章节脚手架中才可运行使用