QA自己动手写前端VUE的跳转和数据的获取

上周算是初步认识VUE，这周末在家开始规划项目开发，考虑可能用到的组件，然后恶补这些用法。单页面的组件开发就不说了（标题、菜单、表单、日期选择框等等），参考VUE elementui模板去添加，还是比较简单的。

添加组件

这里需要注意的是要注意层级关系。el-form下面才是el-form-item，el-table下面才是el-table-colum
另外在嵌套组件的时候还是遇到了点困难。
最开始依样画葫芦，新建了一个新的VUE，主要用来显示表格，然后把它放在index.vue里面，目的就是为了方便管理（解耦）。开始的时候忽略了ref这个很重要的属性，导致后来导入不成功。这个相当于是组件的名字，记住了。

然后就需要在最上层的index.vue中引用这个组件，后面是相对路径，然后需要在components里面加入你的这个组件。

然后在你想加的位置加入即可，这里的名字要和ref定义的名字一样。

打开页面即可看到效果。主要就是两步：1、新建要引入的vue。2、注意引用时的规范。

页面跳转

添加表格之后最后一列是操作列，可以查看具体结果。当然，这个列下面的类型，时间名称等等参考网上的去添加

最后基本就是这个样子（数据是模拟的）

这里又重新定义了一个vue文件，作为跳转的目标页。就是参考网上的vchart的一个折线图模块。这跟上面的相比，有相当于最底层的一个页面。

点击跳转是一个事件，所以需要去定义这个事件的方法。在哪里定义？哪里触发了事件就在哪里定义。const关键字，这里一定要注意引用的路径。就是后面那个path

光配置了这里还是不够的。需要在index.js页面，对这个新加入的页面进行绑定，别忘了，我们路径url还没有配置，参考资料配置路径

import是属于动态引入，看路径就知道和导入包差不多，最后面的detailCharts是文件名。path是对应的路径名。看到这里往上面看看，这个path要和上面的path一致。只不过上面那个图的路径要写全，下面的因为已经是分层级的关系，所以直接写的就是相对路径。

获取输入时间

上面已经加了时间控件，时间控件可以操作但是更需要读取，控件也是在elementui里面找，关键是后面的查询按钮，输入的时间是条件，最后查询的时候需要的是查询条件。所以需要获取到选择或者输入的时间。所以还是最开始需要定义查询按钮click的事件。然后定义事件的方法。最后通过this关键字来获取值。因为函数返回的已经是一个对象了，所以不再需要新的对象来承接这些值。
直接通过this.value[0]就可以获取value数组中第一个元素。

其中的aaa是我自定义的一个提示框

点击查询的时候就会弹出一个提示框，上面有对应的起始时间。现在我们已经知道了怎么获取到输入或者选择的值了。我们的目的是和服务器交互。那么接下来我们就需要定义对应的接口来发送对应的请求了。