

首页  思维导图  详情



12、VUE中的组件基础

2022-04-01 12:35:56   1  举报





AI智能生成

vue

前端开发

vue

组件基础

金色小芝麻

模版推荐

作者其他创作

大纲/内容

定义

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

VUE中

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

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

特点

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

可复用

方便维护

方便拆分

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

有完整的生命周期

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

......

组件优点

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

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

方便项目快速开发

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

2. 方便团队协作开发 

拆分：单独开发单独维护

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

A：都是一个单独的实例

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

两种命名规范

kebab-case 模式

特点

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

例如

base-info

调用

<base-info></base-info>

PasalCase 模式

特点

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

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

例如

BaseInfo

调用

<base-info></base-info>

注意

组件名设置为 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> 这种模式）

两种注册方案

注册特点

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

只能有一个根元素

模板字符串方式

写在组件中的

template 标记方式

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

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

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

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

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

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

注意

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

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

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

全局注册组件

特点

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

语法

Vue.components([name],[options])

name

是组件的名字

options

是组件的配置项

注意

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

局部注册组件

特点

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

语法

const [name]=[options];

name

是组件的名字

options

是组件的配置项

注意

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

注意

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

 Collect

Get Started

基于微服务的应用程序的结构和组件

 Collect

Get Started

vue组件化流程

 Collect

Get Started

vue前端架构图

 Collect

Get Started

13、VUE组件中的slot插槽





0 条评论

下一页