如何根据业务打包自己的功能组件

查询回声输入的包络

最近，我很幸运地使用vue element-ui做了一个管理系统。表单页面很多，而且都大得惊人。我大概会讲一下开发多页的时候做一个大表单的优缺点。我们的任务是在现有工具的基础上，让它变得更简单，功能更强大，更有利于开发和维护。

开门见山

功能是这样的。

表单中常见的功能是将输入绑定到按钮。当我点击按钮时，弹出一个查询框。里面有一个小单子。找到数据后，单击一条线，然后显示它。要求简单，但是会有大量的申请名额，所以一定不能复制粘贴。我们每次都可以写输入框。但是，如果对每个表单和每个独立的弹出框重复弹出小查询，会很麻烦，但是如果我们把它放上去，就会容易得多。

可能有人会觉得是废话，这么简单的事就写这么多是有必要的(我想尽可能说我想说的，手动搞笑)

我们要做的是这个查询的一个小列表。我们把要做的事情整理出来，先计划再写代码，避免边写边改，否则会让代码越来越难维护。写在下面发现不应该这样写，然后懒洋洋的改，然后勉强提交。虽然函数在那里，但我自己看。

1.分析需求：我们需要什么要素？

A.表单表单、表格、分页(布局)b. n条件框、查询按钮、重置按钮和其他功能按钮(在表单内部)。我们知道有几个东西是固定的，一个窗体，一个不知道几列的表，一个分页功能，查询和重置按钮。

整理好这些之后，我们就可以构建第一步中的所有元素了。如果可能有N个，我们就先用一个占据一个位置。结构如下：

Div class=' box ' Div class=' form ' form action=' input type=' text ' * n/form/Div class=' table ' table tr * n TD/TD/tr/table/Div class=' paging '/Div class=' button ' button query/button button reset/button的其他函数/button *n /div/div*n表示我们接下来将用一个循环来创建它

2.我们需要实现什么方法，这些方法要从外部传递

A.查询b .点击分页后查询数据c .重置d .选择一行时获取数据e .其他功能的触发非常明确，因为我们的数据查询和分页是在一个界面，我就讲一下分页查询，普通查询放在一个功能中，所以剩下的四个方法都是在methods中实现的。

methods : { search data(page num=0){//查询数据，ES6参数赋值默认为0 page }，selectRowData(row) {//选择一行作为触发函数，这个方法应该存在于所有ui frames表中，所以我们只需要实现它即可}。ResetSearchform() {//重置表单参数}，doFunction(){ //执行其他函数}}好了，我们来看看那些需要从外部导入的方法，以及为什么要从外部导入

一、第一种是查询数据的方法

原因：我们需要从外部进口。这是查询列表的一个组件。我们绝对不是只适用于一个界面，而是努力让它适用于我们所有的情况

Ii .方法在选择单行后传递给父组件

在vue中，子组件不能修改父组件。在框架包中，大多数作者封装了调度和广播本身，但是我们将它们应用到我们自己的项目中，所以我们不必费心。如果我们想使用它们，我们可以从ui framework源代码中复制一个副本，我们会通过父组件将一个函数传递给子组件，然后子组件会调用这个函数来回调父组件，所以我们需要传递一个函数。

Iii .其他行政职能

3.我们需要vue的数据参数，并确定哪些在组件中，哪些从外部导入

A.from表单的数据绑定(但是我们不确定有多少个框，所以我们需要在这里多留一步)

是的，这个足够了。我们要做的是动态配置，所以更多的来自于传递参数

A.传入一个输入数组，并决定有多少条件搜索框。b .传入表中的列数组，每个列的宽度和列名。c .传入一组其他功能按钮列表。传入被查询的分页参数。传入被查询的数据列表数组。4.有了这些，我们就一件一件的落实这些事情。

或者从结构开始

div class=' search alert ' div class=' inputBox ' El-form : inline=' true ' : model=' search form ' class=' search alertform ' ref=' search form '！-循环创建条件搜索框-El-form-item v-for=' item in input arr ' : key=' item . label ' : prop=' item . data name ' El-tooltip : content=' item . label ' placement=' top ' El-input v-model=' search form[item . dataname]' : placeholder=' item . label ' size=' mini '/El-input/El-tooltip/El-form-item/El-form/div class=' tableBox-循环创建表列-El-table-coleumarr ' :键=' item中的列v-for=' item。标签为“: prop=”的项目。道具“:标签=”物品。标签“: width=”项。width/El-table-判断是否显示页码bar-Div class=' paging ' v-if=' search paging ' El-paging layout=' prev，paging，next ' : total=' search paging . total page ' : small=' true ' : page-size=' search paging . page size ' @ current-change=' search data '/El-paging/Div class=' button box ' El-button size=' mini ' @单击='重置搜索表单' reset/El-button

A.表单(只需先创建一个并将其放入数组中)

{ label : }输入框的名称“dataName:”是双向数据绑定的名称和绑定道具的名称。}现在我们无法在这个组件中直接定义表单的模型结构，所以需要动态创建。我们只需要在组件中创建一个空对象。

b.表格列

{label: '列名' prop: '对应于列内容' width: '单列宽'的字段名称}c. button

{name:“事件和按钮名称”，type:“按钮类型”}6。接下来，我们将实现我们想要传入的方法

//echo函数，可以得到单选数据searchbfn(row data){ console . log(row data)}，//查询函数，分页等搜索fn (formdata，page num=0){ API({ formdata : formdata，Pagedata:pagenum})。然后(RES={ console . log(RES . data)this . search datalist=res.data.datalist//page显示分页大小控制this . search paging={ 0.paginfo，pagesize: 5}})。catch (err={throw }) }7。最后，我们将填写所有输入参数

search datalist : { } search paging : { }最终摘要

这是我第一次写分享题，应该是缺乏写作逻辑。如果你什么都不懂，或者有什么建议，请多告诉我。我在：https://github.com/wqliusong/happy有组件和一个可以直接运行的页面

再来说说我遇到的问题。一是vue的双向数据绑定可以是动态的。提醒大家对象后的动态名称应该是[]，但不能。请注意我的输入来理解它。数据中的参数也可以动态创建。有了这些，我们可以解决很多问题，所以我们不太在乎他的初始数据格式。

接下来，我将编写一个多行编辑组件。虽然在UIS很多地方也有，但功能略显单一。也许我们的程序员只要知道1 1=2，就能解决所有的数学问题。我想尽量丰富他的功能。一个是关于动态添加验证条件的实现。希望大家都能有所收获。

以上是边肖介绍的Vue封装功能组件的详细讲解和集成，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！