vue 父链和子组件索引_Vue.js 学习笔记 第7章 组件详解

组件(Component)是Vue.js最核心的功能，也是整个框架设计最精彩的地方，当然也是最难掌握的。

本章将带领你由浅入深地学习组件的全部内容，并通过几个实战项目熟练使用Vue组件。

7.1 组件与复用

7.1.1 为什么使用组件

在正式介绍组件前，我们先来看一个简单的场景，如图7-1所示：



图7-1中是一个很常见的聊天界面，有一些标准的控件，比如右上角的关闭按钮、输入框、发送按钮等。

你可能要问了，这有什么难的，不就是几个

、吗？

好，那现在需求升级了，这几个控件还有别的地方要用到。

没问题，复制粘贴呗。

那如果输入框要带数据验证，按钮的图标支持自定义呢？

这样用JavaScript封装后一起复制吧。

那等到项目快完结时，产品经理说，所有使用输入框的地方，都要改成支持回车键提交。

好吧，给我一天的事件，我一个一个加上去。

上面的需求虽然有点变态，但却是业务中很常见的，那就是一些控件、JavaScript能力的复用。

没错，Vue.js的组件就是提高重用性的，让代码可重用。

当学习完组件后，上面的问题就可以分分钟搞定了，再也不用害怕铲平经理的奇葩需求。

我们先看一下图7-1中的示例用组件来编写是怎么的，示例代码如下：

1

2 与 xxx 聊天中

3

4

5

6

7

8

9

10

11

12

13 发送

14

15

16

17

是不是很奇怪，有很多我们从来都没有见过的标签，比如、、、和等。

而且整段代码除了内联的几个样式外，一句CSS代码也没有，但最终实现的UI就是图7-1的效果。

这些没见过的自定义标签就是组件，每个标签代表一个组件，在任何使用Vue的地方都可以直接使用。

接下来，我们就看看组件的具体用法。

7.1.2 组件用法

回顾一下我们创建Vue实例的方法：

1 var app = newVue({2 el: "#app"

3 });

组件与之类似，需要注册之后才可以使用。注册有全局注册和局部注册两种方式。

全局注册后，任何Vue实例都可以使用。全局注册示例代码如下：

1 Vue.component("my-component", {2 //选项

3 });

my-component就是注册的组件自定义标签名称，推荐使用小写加减号分割的形式命名。

要在父实例中使用这个组件，必须要在实例创建前注册。

之后就可以用的形式来使用组件了。

实例代码如下：

1

2

3