023 V 初识组件

不二如是

                               
登录/注册后可看大图

上一讲我们搞定了动态数据绑定，本次来学习组件。

组件（Component）是Vue最核心的功能，是一个超级亮点。

我们先来看一个场景：

这是一个常见的聊天界面，我们用Vue来实现一下。

还有一些标准的控件，比如右上角的关闭按钮、输入框、发送按钮等等。

最直接的想法：

创建几个div，button

没错，可以，但是别的地方也需要呢？

那么直接复制好了。

如果需要更多的文字验证呢？

用JS和正则表达式呗。

像这种为了解决问题而解决问题的直接操作，很初级。

万一哪天项目变动，就会出现一大堆没用的代码。

没错，我们需要一个“重用性”很高的组件，用在哪里都很方便。

Vue组件应运而生。

举个例子，来一段很语义话的代码：

1. <Card style="width: 333px">
   
2.     <p slot="title">与XXX聊天中</p>
   
3.     <a slot="extra">
   
4.         <Icon type="ios-close" size="18"></Icon>
   
5.     </a>
   
6.     <div style="height: 100px">
   
7.         
   
8.     </div>
   
9.     <div>
   
10.         <Row :gutter="16">
    
11.             <i-col span="16">
    
12.                 <i-input v-model="value" placeholder="请输入..."></i-input>
    
13.             </i-col>
    
14.             <i-col span="3">
    
15.                 <i-button type="primary" icon="paper-good">发送</i-button>
    
16.             </i-col>
    
17.         </Row>
    
18.     </div>
    
19. </Card>

复制代码

很奇怪的代码，Card、Row i-col这些元素我们都没见过。

这些没见过的自定义标签就是组件，每个陌生的标签就是一个组件。

一旦创建完成，在任何使用Vue的地方都可以直接使用。

具体如何创建，请看下回分解。

---

课后作业


1、组件是Vue最新的功能？（T/F）

2、自定义的标签可以是组件吗？（T/F）



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

Ruide

F
T

一笙彤

0

HanYanShuang

学习

jack6666

1