上一篇文本我们介绍了通讯录Web应用的功能特点，并使用命令行工具创建出了Vue3项目，本文我们将继续介绍这个项目。首先介绍Vue 3程序的入口文件，之后再从根组件开始一步一步地展开对组件引入、注册和使用的说明。由于根组件会与它的每一个子组件进行交互，本文将重点展示根组件如何使用子组件，并提供了哪些数据可供子组件使用，各个组件之间的交互将放置在下一篇文章中做介绍。

「Vue 3应用实战」通讯录Web应用之一

程序入口

每一个单页面程序都含有一个HTML页面，本项目应用的页面文件为index.html,它在项目中的位置如图1所示，使用命令npm run dev启动本地Web服务器，访问时，所打开的文件就是index.html。

图1

index.html文件作为Vue 3应用默认创建的文件，我们只对其中的标题进行了修改，将其改为“通讯录”，其它内容使用默认值，我们按照图2中的代码进行介绍。

图2

图2第8行代码为修改页面的标题为“通讯录”，代码第12行将一个div元素的id值设置为app，此元素作为Vue组件的挂载点（也可以称其为Vue组件的容器），之后所有的Vue组件内容全部是在这个元素中进行渲染的，第13行代码为HTML页面所加载的Javascript文件，此文件正是Vue应用的入口文件，打开这个main.js文件，查看它的具体内容，如图2所示。

图2

图2中只有4行代码，第1行代码引入了bootstrap样式库，用以设置整个应用的样式和布局。第2行代码引入Vue库中的一个函数，名称为createApp，每一个Vue 3应用程序都需要一个应用实例，这个应用实例就是通过createApp而创建，createApp的参数是一个组件，我们称其为根组件，根组件可以包含其它的Vue组件，每一个组件又可以包含各自的子组件，这就是我们为什么说Vue开发技术是基于组件的原因。在创建这个应用实例之前，使用了第3行代码引入了App组件，作为本应用的根组件，它对应的App.vue文件与main.js位于同一个目录下。引入这个App组件后，将其作为createApp的参数并创建一个应用实例，之后将这个应用实例挂在到id为#app的元素上。

第5行代码实际上是执行了2个操作，我们将其分解为如下的代码

let app = createApp(App);

app.mount(‘#app’);

其中第1行代码将创建的应用实例赋值给了一个app变量，这个app变量就表示一个Vue应用实例，但是，在这个应用实例挂载至页面上的某个元素之前，app组件及其内容是不会显示出任何内容的，之后第2行代码执行了mount函数，即上述中第2行代码后，Vue所渲染的内容才会显示出来。

程序组件

整个应用程序的组件分为5大组件：App根组件、ContactList联系人列表组件、Pagination分页组件、CreateDialog创建或修改联系人组件和DeleteDialog删除联系人组件。根组件App使用了其它的四个组件，页面加载完成后，各个组件的关系如下图3所示

图3

图3中红色边框表示区域为App组件、绿色边框表示区域为ContactList联系人列表组件，蓝色区域为Pagination分页组件，其它的两个组件在点击“新建联系人”和“删除”按钮时分别弹出对应的创建联系人组件和删除联系人组件，它们并未在图3中显示出来。

App根组件App组件功能和布局

除了它自己之外所有其它组件均为App组件的子组件。在单文件组件（SFC）中，其模板内容定义如下图4所示。

图4

图4模板定义App组件使用的元素和组件情况，我们由上至下逐个介绍元素或组件。第159-161行代码为通讯录标题，标题内容居中显示。第163-167行代码为右上角“创建联系人”按钮内容；第169-176行代码为联系人列表组件ContactList；第176-180行代码为分页组件。以上这些元素和组件在页面加载时会自动创建，并展示出来。但是之后的两个组件：创建对话框和删除对话框是没有主动显示的，只有当用户点击相应的按钮时才会显示出来。

App组件使用了其它的四个组件，每一个组件都独立的位于一个文件中，见图5所示，

图5

除了App组件之外所有其它的组件都位于components目录下，在根组件App中，文件的开始部分内容对每一个使用到的组件进行了导入操作，如下图6所示

图6

图6中代码显示一共有四个组件全部被引入到App组件内，但是如果想要使用各个组件，仅仅使用import导入还是不够的，还需要将这些组件进行注册，在App组件中注册其它组件是通过components属性实现的，通过下面图7第54行的代码设置之后，我们便可以在App组件中像使用其它的标签一样使用这些子组件了。

图7

在图4中第169-174行代码声明了一个ContactList组件，其它3个足迹的用法与其相同。细心的你可能已经发现，对于SFC来说联系人列表的名称为ContactList，但是在图4中模板使用这个组件时它的名称变为了contact-list。对于SFC来说，官方建议采用PascalCased方式进行命名，这样比较便于和本地HTML标签进行区分；尽管HTML的标签和属性是不区分大小写字符的，但是，如果你的组件名称为PascalCased风格、属性名称为camelCased风格，那么在模板中使用它们的时候请将其转换为对应的keban-cased风格。这就是为什么在图4中看到的标签名称变为contact-list的原因了，它对应的组件就是ContactList组件。

联系人列表组件

联系人列表组件显示当前一页的联系人信息，列表组件ContactList标签在App组件中定义的完整样子如下图8所示。

图8

图8中第170行代码设置组件属性page-data的值为pageData，它表示将当前App组件的数据pageData的值作为属性page-data传递给子组件ContactList组件，子组件可以在其内部使用pageData的数据。

App中的pageData又来自于哪里呢？它可以是Vue组件data函数返回值对象中的一个属性，我们称其为data属性，也可以是一个computed对象中的一个属性，称其为computed属性，如图9所示。

图9

图9中第72和73行代码定义了data属性pageOffset和pageSize，它们的初始值分别为0和4，表示程序初始化时选中的当前页码为0，每一页显示的联系人个数为4个；第78-151行代码定义了一个contacts数组，包含了所有的联系人数据，默认存储了6个联系人信息。第63行代码定义了computed属性pageData。

可能有人会问，问什么显示联系人使用的数据不是data属性contacts而是computed属性pageData呢？前文中我们介绍了data属性和computed属性都是可以作为模板的属性值使用的，但对于本应用来说，如果使用data属性contacts，那么所有的联系人数据都会显示到当前页面，是没有分页功能的；computed属性pageData则是通过当前页码pageOffset和每一页显示的个数pageSize计算出该从data属性contacts数组中获取哪些联系人数据进行显示，这样就保证了每次只显示一页（最多4个）联系人的目的。

图8中第171行代码表示子组件ContactList中触发的自定义事件edit-contact，这个事件触发时会使用App组件中的onEditContact方法作为此事件的处理器；第172行代码表示子组件ContactList触发的自定义事件show-delete-contact，这个事件触发时会使用App组件中的onShowDeleteContact方法作为它的事件处理器。

分页组件

分页组件位于联系人列表下面，如图3蓝色区域所示，它在模板中完整的内容如下图10所示，Pagination组件使用了两个属性:page-offset和num-of-page。第177行代码设置了分页组件的page-offset属性，它表示当前选中的页码；第178行代码设置了分页组件的num-of-page属性，它表示所有联系人一共所占用的页数。page-offset属性所绑定的对象为App组件的pageOffset，但是num-of-page属性所绑定的值为一个表达式，这个表达式依据联系人的总数和每一页联系的个数而计算出总页数。最后是这个分页组件当页码发生变化时所触发的事件page-changed，如图10中第179行代码所示，这个事件的处理也是交由App组件的onPageChanged方法实现的。

图 10

创建对话框

这个应用中含有两个对话框，一个是用于创建联系人的CreateDialog组件，另一个是用于删除联系人的DeleteDialog组件，在图4中，我们可以看到这两个对话框和其它的两个组件一样位于模板中，但是为什么没有显示出来呢？我们将这两个对话框代码展开，如下图11所示

图11

图11中，第183行代码和第191行的代码使用了v-if指令，它的含义是如果指令表达式的值为true，那么就会渲染这个组件或元素；反之，则忽略这个组件或元素的渲染操作。再回到图9中第76和77行代码，设置了data属性isContactDialogVisible和isDeleteDialogVisible的值都是false，这就是为什么程序加载完成之后这两个对话框不会显示的原因了。

本文中我们主要介绍了Vue项目文件结构和Vue命令行工具所生成index.html和main.js两个文件，之后介绍了根组件App所使用的其它组件状况，并介绍了根组件的模板和数据信息，但并没有介绍它与各个组件之间是如何进行交互的，父子组件之间是如何使用属性和自定义事件的，在接下来的一篇文章中，我们将继续介绍Vue相关特性，谢谢阅读，我们下一篇文章见！

「Vue 3应用实战」通讯录Web应用之一