vue从入门到精通(十八)：组件

一、什么是组件

组件一词不是 Vue 独有的。它是许多 UI 框架都有的共同特性。它描述了 UI 的一部分，例如按钮或复选框。多个组件也可以组合成更大的组件。

组件是 Vue 提供的将 UI 拆成较小部分的主要机制，既可以提高可维护性，也允许代码重用。

组件的定义:

实现应用中局部功能代码和资源的集合
分为：
单文件组件：一个文件中只包含有1个组件。
非单文件组件：一个文件中包含有n个组件

二、组件的基本使用

1，三个步骤

Vue中使用组件的三大步骤:

• 定义组件(创建组件)
• 注册组件
• 使用组件(写组件标签)

1.1，定义组件

使用Vue.extend(options)创建，其中options利new Vue(options)时传入的那个options大概一样。

区别如下:

1.el不用写，为什么?- 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。

2.data必须写成函数，为什么?避免组件被复用时，数据存在引用关系。

备注:使用template可以配置组件结构。

1.2 注册组件

1.局部注册:靠new Vue的时候传入components选项

2.全局注册:靠Vue.component(‘组件名’,组件)

1.3 使用组件

<!--直接写组件名称-->
<school></school>

2，几个注意点

1.关于组件名:

一个单词组成:

• 第一种写法(首字母小写):school
• 第二种写法(首字母大写):School

多个单词组成:

• 第一种写法(kebab-case命名):my-school
• 第二种写法(Camelcase命名):MySchool(需要Vue脚手架支持)

备注:
(1).组件名尽可能回避HTML中已有的元素名称，例如:h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

2.关于组件标签:

• 第一种写法< school>
• 第二种写法: < school/>

备注:不用使用脚手架时，< school/>会导致后续组件不能渲染

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

三，组件的嵌套