12、VUE中的组件基础

不论是vue还是react，我们后期开发都是基于组件化开发的

组件是可复用的 Vue 实例，且带有一个名字

我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用

VUE中

定义

每一个组件就是一个自定义标签

可复用

方便拆分

方便维护

每个组件作用域隔离（互不干扰）

有完整的生命周期

有自己的响应式数据和各种方法（事件）

......

特点

有助于实现代码或者组件的复用

方便项目快速开发

而且能够构建敏捷化开发平台

1. 基于组件开发，我们提取公共的组件（封装）

拆分：单独开发 单独维护

2. 方便团队协作开发 

A：都是一个单独的实例

B：都有自己的DATA/METHODS/生命周期等

3. 在vue中每一个组件都是一个独立的个体

组件优点

当使用 kebab-case 定义一个组件时，在引用这个自定义元素时只能还用这种方式调用。

<base-info></base-info>

调用

base-info

例如

kebab-case 模式

当使用 PascalCase (首字母大写命名) 定义一个组件时，在引用这个自定义元素时两种命名法都可以使用。

页面在VUE中渲染的时候，所有组件大写的名字都会变为小写

<baseinfo></baseinfo>

BaseInfo

PasalCase 模式

组件名设置为 kabab-case 模式 或者 PasalCase 模式，在new Vue渲染的视图中都只能用 <base-info></base-info> 这种方式调取（主要原因是 new Vue 视图渲染的时候，会把所有大写字母转换为小写）

在其它的 template 语法中，基于 <BtnList></BtnList> 或者 <btn-list></btn-list> 都可以正常的调用（只有在new Vue基于el指定的视图中，才只能用<btn-list></btn-list> 这种模式）

注意

两种命名规范

只能有一个根元素

写在组件中的

模板字符串方式

写在结构中，组件中直接调取ID名即可

template 标记方式

1、基于 TEMPLATE 指定组件渲染的视图

为了保证每个组件中的DATA是独立的，需要让每个组件的DATA是一个闭包函数

只有这样最后把N多组件放在一起渲染，相互之间的DATA才不会冲突的

return 的对象中包含指定的响应数据

data:function(){...} => data(){...}

2、指定响应的数据(data 必须是一个函数)

因为每一个组件都是一个单独的可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项

除了是像 el 这样根实例特有的选项。

例如： data、computed、watch、methods 以及生命周期钩子等。

注册特点

创建组件后直接在页面中调取使用即可

是组件的名字

name

是组件的配置项

options

语法

全局注册的组件可以相互调用

全局注册组件

需要在页面渲染的时候（new Vue）基于 components 注册一下才能使用

const [name]=[options];

局部注册的组件在其子组件中不可用

局部注册组件

在VUE视图中调用组件需要采用双闭合的方式，因为单闭合的方式调用，会导致下面的代码不再进行渲染 <base-info/>

两种注册方案

VUE 中的组件基础