测试圈相亲平台开发流程（14）：新增会员功能

在上节课，我们终于完成了 查询功能。

现在要做一个同样简单的...增加功能。也就是点击页面上的 按钮，可以录入到库，分为男和女哦~

我这个设计是，这些输入框不光作为查询结果。也可以作为新增会员的信息输入框。

当点击新增按钮后，我们把当前页面的数据全部传送给后台，由后台入库即可！

首先是给这俩个新增按钮 设置点击事件。

注意看，我这里虽然是俩个新增按钮，但是调用的是同一个函数，并且没有任何区别。

那有同学就问了，那后台怎么知道新增是男还是女的？

回答：在我们的输入框中有性别这个输入框。所以后台根据性别存储。

然后又有同学问了，那既然俩个按钮功能一样，为啥还要写俩个按钮呢？

回答：这是为了体验上的设计和给人一种美感交互，属于产品思维。

好了，我们不纠结这个问题，继续往下研究。

在vue中写好这个函数 add_user 。

现在问题来了，这个函数要做什么事？

答：先获取当前各个输入框内的数据，然后用axios发送给后端。

那么我们第一步就面临了困难，这些输入框的内容，是存在于俩个子组件内的。而他们的父组件Home.vue，想要获取并不可以直接拿到。需要先让子组件传上来才行。这就是一个新的知识点，子传父

现在我们仍然面临一个问题，就是这个子传父的时机，应该是什么时间点开始传输数据呢？

唯一的触发点显而易见是 父级页面的增加按钮。

所以这个问题就变成了，父组件主动获取子组件数据！

这个步骤是：父页面先给子页面添加一个属性

如上图，我们一次性就把个人信息和择偶信息都搞了。

然后再在下面add_user这个函数内写好获取子组件代码：

我们可以显示一下，看看一会能否成功获取。

好，父组件到这停止。我们马上切换到这俩个子组件。

我们之前的子组件中，是用:value这种方式来显示数据

但是现在功能多了，:value已经不能满足了。现在它需要双向绑定，也就是说当input输入框内容改变后，我要让这些数据反过来同步 userInfo这个大字典。

所以，把这里的所有:value全部换成vue专属的指令：v-model：

然后是Selction.vue组件也一样全部更换：

现在，我们来测试一下，当我在页面输入一些内容后，点击新增按钮，看看console显示出来的数据是否正常：

可以看到，数据是正常的。

这俩个字典我们现在已经成功拿到了，下一步就是axios 发送给后端了。

下一节见。