上一篇文章我们介绍了通讯录的App根组件,通过介绍它的模板内容弄清楚了4个子组件是如何在其内进行布局的，之后介绍根组件所提供的data属性和computed属性，最后介绍了4个组件与根组件App之间传递属性和事件的处理方法。本文将介绍App根组件和创建联系人CreateDialog组件。

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

App根组件

触发点击事件

App根组件在其内部也含有一个事件交互功能，它是指当点击右上角“创建联系人”按钮时，页面会弹出一个创建联系人的对话框，如图1所示

这个是一个按钮的点击事件，点击事件交互逻辑是什么样子的呢？我们首先将App组件中“创建联系人”按钮的源码单独贴出来，如下图2所示

图2第164-166行代码为“创建联系人”的按钮，当用户点击此按钮时，它便会触发一个”click“事件，Vue通过v-on:click指令实现监听DOM事件，由于事件监听用法太普遍了，Vue提供了v-on:click指令的简写方式@click，使用图2中第164行的方式将按钮的”click“事件绑定到App根组件的一个名称为onShowCreateContactDialog方法上。这样就达到了：用户点击”创建联系人“按钮时程序便会执行onShowCreateContactDialog方法，此方法的定义如下图3所示

App组件的data属性

我们再来看一下图3中的data属性是如何在data选项中定义的。如下图4所示，isContactDialogVisible的缺省值为false，isEditing的缺省值也为false，currentPerson的值则是一个内容为空的对象。

图3中第31行代码将data属性isContactDialogVisible的值设置为true，表示将创建对话框v-if指令的表达式设置为true，那么，这就将创建联系人的对话框显示出来了。

isEditing表示当前执行的操作是创建还是修改联系人，如果其值为false则表示创建联系人，反之，则表示修改联系人。在图3中第32行代码将这个值设置为false，表示要创建一个联系人，最后是设置currentPerson为一个空的对象，它表示当前正在编辑中的联系人信息，由于新建联系人的信息都是未知信息，因此，currentPerson的值就设置为了一个内容为空的对象。

CreateDialog组件数据绑定

接下来我们就查看一下创建联系人对话框所接收的哪些数据，首先，我们再次查看下对话框在模板中是如何使用的，如下图5所示。

图5显示的是App组件的模板使用CreateDialog组件对应的代码，CreateDialog组件在模板中使用了一个data属性isContactDialogVisible，结合图3中第31行代码，它们所实现的功能是：当用户点击“创建联系人”按钮时，执行图3中的代码，将isContactDialogVisible的值设置为true，图1中创建联系人对话框便显示出来了。

图3中代码还另外设置了两个data属性:isEditing为false和currentPerson为空内容对象。这两个值被图5中第184和185行代码所使用。第184行代码的含义是将App组件的data属性currentPerson绑定到CreateDialog组件的person属性上；而第185行代码则是将App组件的data属性isEditing绑定到CreateDialog组件的is-editing属性上。这里使用的属性绑定:person和:is-editing都进行了简写，其完整的写法分别为：v-bind:person和v-bind:is-editing，我们通常在代码中采用图5所示的数据绑定写法。

CreateDialog自定义事件处理器

图5中第186和187行代码为两个自定义事件，它是由CreateDialog组件在内部触发，但是事件的处理器是由App组件提供，如图5中的onCreateContact和onCreateContactCancel方法分别对应create-contact事件和create-contact-cancel事件。这两个事件处理器在App组件中的定义如下图6所示

组件的事件处理器通常是定义在methods选项中，如图6所示，onCreateContact和onCreateContactCancel这两个方法都位于methods选项定义中，在methods中定义的方法都是可以通过this来访问当前组件对象的。

图6第9行代码显示onCreateContact方法含有一个参数，它表示待创建的联系人对象，由于这个方法被两种场景所使用：一种场景就是创建联系人，比如现在介绍的情况；另一种场景是修改联系人的情况。我们可以通过参数contact的id属性是否为0来判断是否为创建联系人。因此图6中第12行代码判断contact.id是否为0，如果是的话，就将这个联系人数据加入到data属性contacts数组中。这样当用户通过输入联系人信息，触发创建联系人事件后，图6中onCreateContact函数代码就会被执行，数据便插入到联系人列表中。由于Vue组件的响应式特性，新增的联系人数据在执行完图6中的代码后便会在界面上立即显现出来，用户不需要手动刷新界面。

图6中第25-27行代码为create-contact-cancel事件的处理器，App组件接收到此事件后会执行第26行代码，它与第12行代码一样，都是将data属性isContactDialogVisible的值设置为false。我们之前介绍过了这个值为v-if指令所绑定的表达式（见图5），控制着对话框的显示与隐藏，现在它的值变为了false，表示当前的创建联系人对话框隐藏（即关闭了）。

创建联系人对话框

“创建联系人”对话框CreateDialog组件是提供给用户进行信息输入的界面，当用户完成联系人信息输入后，点击“创建联系人”或“取消”按钮便会执行相应的动作。在本文的开始部分，图1中给出了“创建联系人”对话框的界面，在这个界面上，用户可以输入的联系人的信息与在这个组件中data属性contact的成员数据保持一致，如下图7所示

图7中定义的contact对象中的每一个成员都与界面中相应的控件进行了绑定，这里使用的绑定为双向绑定：即data属性contact中的成员值发生变化时，与之绑定的控件的内容也会随之做出相应地变化；反之，如果控件中的内容发生了变化，那么，这个data属性contact的相应成员值也会自动更新。我们接下来结合几个实例进行详细介绍。

文本框控件数据绑定

图8为CreateDialog模板中关于名字显示的代码片段，第8-13行代码定义了一个input标签，用以输入联系人的名字，第12行代码使用了双向数据绑定v-model指令，它将input控件与data属性contact.firstName进行了绑定，即contact.firstName为input控件的底层数据，input控件为contact.firstName的外层展现，二者之间只要数据不一致，v-model指令就会进行同步操作，时刻地保持contact.firstName与input的value值一致。

单选控件的数据绑定

Vue简化了单选控件的数据获取和更新操作，它同样采用了v-model实现控件值与data属性之间的数据双向同步。图9为CreateDialog组件中关于性别的代码片段，第32-39行代码为单选控件代码实现，第37行代码指定了这个单选控件的值为“male”；第43-50行代码为另一个单选控件，第48行代码则表示这个控件的值为”female“。这两个单选控件通过v-model指令分别通过第38行和49行代码将自己与data属性contact.gender变量进行了双向绑定。当用户点击第一个单选控件选中“男”标签时，contact.gender的数值就会变为“male”,反之，选中“女”标签时，它的值就会变为“female”。

对于CreateDialog组件中的其它控件来说，其类型都与前一节介绍的名字控件类似，也是使用v-model进行了双向绑定，所不同的是它们分别使用了图7中contact对象的不同成员进行绑定。

对话框界面初始化

上面两个小节我们介绍了控件和data属性使用v-model进行了数据双向绑定，如果在图1中的界面上执行输入文本或控件选择操作，那么界面上控件的数值会同步至contact对象相应的成员上，那么，反方向数据传输的场景在什么情况下会发生呢？在CreateDialog组件初始化时。

在介绍初始化之前，我们先来看一下组件的自定义属性。Vue组件除了可以使用HTML定义属性名字之外，它还可以定义自己的属性，例如图5中第184和185行代码使用了两个自定义属性person和is-editing。组件自定义属性是需要在对应的组件内显式地声明才可以使用，其声明方式是在props选项中，如图10所示

图10中第125行代码声明了两个自定义属性：person和isEditing。在App组件的模板中我们将属性camelCase的书写风格改变成了kebab-case书写风格。当组件声明了自定义属性之后，我们就可以在使用这个组件的位置为其设置自定义属性值了，如图5所示。它表示将CreateDialog组件父组件App组件中的currentPerson对象绑定至CreateDialog组件的person属性，将App中的isEditing值绑定至CreateDialog组件的is-editing属性。这样，我们就可以在CreateDialog组件中通过访问this.person和this.isEditing的方式获取到父组件App传递给它的数值了，见图10中第122行和第123行代码，它们分别使用了这两个属性值。

获取到父组件传递过来的数值后，我们在图10中的mounted方法中对contact和title两个data属性进行了设置，通过图3中我们知道点击“创建联系人”按钮时，currentPerson的内容被设置为了一个空内容对象，那么，在图10中第122行代码处this.contact的内容也就变为了一个空对象，由于data属性contact的成员与各个控件之间采用的是双向绑定，因此contact中的成员数据会同步至相应的控件中，导致每一个控件在这种状态下都显示为空内容。

初始化的另一项内容是：根据自定义属性isEditing的值来确定这个对话框的标题应该显示什么内容。在图3中第32行代码将isEditing的值设置为了false，即表示这是一个“创建联系人”的对话框，在图10中第123行代码处会将this.title变量的值赋值为“创建联系人”。这样我们使用父组件的数据通过子组件提供的属性进行了数据传递，最终完成了子组件的界面初始化操作。

事件响应

“创建联系人”对话框提供了两个事件行为：点击“创建联系人”按钮，会将当前输入的联系人信息构造为一个新的联系人，并添加至当前的联系人列表中；点击“取消”按钮，直接关闭这个创建联系人对话框，丢弃已经存在于界面上的所有数据。图11为创建联系人对话框中的两个按钮代码片段，

图11中第110行代码对创建按钮的文本内容使用了文本插值的数据绑定方式，将data属性title的值作为按钮的内容进行显示，第109行代码设置了按钮点击时的事件处理器onCreateContact函数，这个函数的定义如下图12所示，第143-151代码实现了“创建联系人”按钮的点击事件处理器。

点击事件的处理函数会依据属性this.isEditing的值来设置this.contact.id值，如果isEditing的值为false，那么就表示处于创建联系人状态，将contact.id的值设置为0，之后通过第150行代码发出一个“create-contact”自定义事件，同时与这个事件一起触发的还有一个this.contact参数，参数会和事件一并传递至父组件App中进行处理。上文图5中第186行代码添加了“create-contact”的事件处理函数，this.$emit函数的第二个参数会作为父组件事件处理函数的第一个参数使用，对应图6中第9行代码中的contact参数，图6详细介绍了如何将一个联系人对象添加至当前联系人列表中，此处不再赘述。

“取消”按钮的事件处理函数与“创建联系人”按钮的事件处理函数工作方式一致，但它不需要传递参数。“取消”按钮的点击事件监听是在图11中的第105行代码处完成的，当点击”取消”按钮时，onCreateContactCancel函数便会被执行，如图12第152-153行代码所示，它同样会发出一个自定义事件“create-contact-cancel”，但是与上一个事件相比，这个事件不携带任何参数。图5中CreateDialog组件设置了“create-contact-cancel”事件的处理函数onCreateContactCancel，即图6中第26行代码，它会隐藏了当前的“创建联系人”对话框。

本文中我们主要介绍了根组件App和创建联系人对话框组件CreateDialog，并详细介绍了父子组件之间通过属性和自定义事件进行数据通讯，在接下来的一篇文章中，我们将继续介绍项目中的其它组件，谢谢阅读，我们下一篇文章见！

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