vue当中自定义事件中参数问题

简介

在使用组件库的时候，我们很常见会监听子组件事件，但是参数是由我们的子组件内部emit出来传递的参数决定，因此，如果我们想要即接收组件的自定义事件的参数，又要自定义传递参数。项目场景常见于后台开发下拉菜单当中。

事例

iView组件库中的下拉组件为例,没用过的element组件库大同小异。具体用法可以参考官方文档。

上面我们着重看组件的自定义事件，就on-click事件为例，点击菜单项时触发，传递的参数为每项的name值

实战项目用法

需求为我们点击每项下拉项的时候，不单单需要拿到对应绑定的name字段，我们还需要拿到表格当前项的对应数据项，因此我们在传递name的时候，就还需要传递对应数据项进行操作。比如我们删除机构，需要只要当前项的id。

具体代码

表格的用法我就不说了，不知道的参考文档

一般我们监听自定义事件的时候更多的是直接给个函数执行，但是直接一个函数执行是无法传递当前数据项的参数的，子组件在emit事件的时候， 传递的参数始终是name,因此转变思路，通过执行一个函数，返回立即执行另外一个函数就可以实现自定义传参了，这里的使用方法和我们react当中jsx语法的监听类似，主要运用的就是函数科里化收集参数的特点。如果你接触过react这种写法一定很熟悉

//模板
<Table :columns="columns" :data="data" :loading="tableLoading" border>
    //row就是对项的数据
      <template slot="operate" slot-scope="{row}">
         <Dropdown @on-click="(name)=>handleAction(name, row)" transfer trigger="hover">
          <Button size="small" type="primary">操作</Button>
          <DropdownMenu slot="list">
            <DropdownItem name="view">查看</DropdownItem>
            <DropdownItem name="del">移除</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </template>
    </Table>
    js代码
      // 下拉条件筛选：这里就可以根据name值根据需求进行不同操作了
    handleAction(type, row) {
      switch (type) {
        case "view":
          this.$router.push({ name: "用户信息" })
          break;
        case "del":
        //执行删除操作，就用到了上面传递的row了
          break;
      }

效果

总结：

本节重点：高阶函数，函数科里化 ， 实用记得收藏关注哦！