子向父传值, 自定义emit方法参数

前言

现阶段工做中, 主流前端技术栈通常多现于 vue + element 及 react + ant Design. 在使用框架库时,总会遇到须要针对emit函数添加自定义参数的须要,但又不能修改源码, 因此研究总结了几个方法.

正文

通常而言,须要添加emit自定义参数, 经常使用的方式有两种

1. 在针对单个回调参数的时候, 使用$event 接收返回参数, 以后为自定义参数. 话很少说,直接上代码

// 子组件
this.$emit('test',this.param)
// 父组件
@test='test($event,userDefined)'
复制代码

这种方式很好理解, 就很少赘述了.

2. 第二种针对多个回调参数的时候, 使用arguments做为接收返回参数的数组, 以后为自定义参数

// 子组件
this.$emit('test',this.param1，this.param2, this.param3)
// 父组件 arguments 是以数组的形式传入
@test='test(arguments,userDefined)'
复制代码

arguments依次取对应回调参数, 如: 上述中 arguments[0] 表明this.param1.

这种方式也好理解, 也很少赘述.百度不少关于这两种的示例.

3. 第三种就是我以为很好用的方法, 前景是在使用element 下拉框远程搜索时使用remothod方法时,由于想封装个通用的搜索项工具, 因此就研究了一下,发现上述两种都不能添加自定义参数, 因此就研究了第三种: 在emit的方法内部再调用自定义方法, 就能够添加自定义参数了.

<el-select
    v-model="params[option.name]"
    // 这里自己是:remote-method="remothod" .而经过上述两种方式彷佛获取不到,因此就转换了一下,经过在它自己回调函数的基础上,再调用一个自定义函数, 那么就能随意修改添加参数了, 并且也不影响自己组件封装的协调性.
    :remote-method="(query)=>{remoteMethod(query, 'qweqwe')}"
    :loading="loading"
    placeholder="所有"
    style="width: 100%"
    class="saed"
    multiple
    reserve-keyword
    collapse-tags
    filterable
    remote
    @remove-tag="delSelect"
    @change="changeList"
    @keyup.native="changemo1"
    @keydown.native="changemo">
复制代码

// 方法函数
     remoteMethod(query, a) {
     这里打印a就能够直接获取qweqwe, 
      console.log(query, a)
      if (query.trim() !== '') {
        this.text1 = query
        this.loading = true
        setTimeout(() => {
          this.loading = false
          const str = this.warehouseType
          this.getList(query, str)
        }, 200)
      } else {
        const str = this.warehouseType
        this.getList('', str)
      }
复制代码

想到这种方法也是由于element上并无说明上述query为回调参数, 但实际确实出现指代输入值,不能经过上述两种方式获取, 因此就想着转换以后获取.

注意点

第三种方法,我的认为很方便, 但有一个注意点须要关注, 就是若是自己emit函数须要有return方法返回值的时候, 那么,在执行自定义方法时, 须要将自定义方法做为返回项return出来. 若是忘记return的话, 其实是不会产生任何效果的, 等于执行了一个无效函数.这点尤为要注意. 这里给个例子. 关于给table表格添加图标提示,这里是须要给table添加?号并移入显示提示.

// 表头部分
 <el-table-column
     v-for="(item, index) in tableHeader"
     :prop="item.prop"
     :label="item.label"
     :align="item.align"
     :show-overflow-tooltip="showOverFlowTooltip"
     // 这里使用elment指明的render-header进行添加. 由于自己说明中是要return出一个html结构,因此这里不只要在自定义函数中return出结构, 还须要将自定义函数的结果return出来. 在子函数中return出来的结果并不表明父函数也return出来了,
     :render-header="item.renderHeader? (h, {column})=> { return renderHeader(h, {column}, item.toolText)} : function(){ return item.label}"
     :key="index"
     :fixed="item.fixed"
     :sortable="item.sort"
     :width="item.width || null">
复制代码

renderHeader(h, { column }, name) { // h即为cerateElement的简写，具体可看vue官方文档
 // 这里我添加了一些自定义的封装参数. h 和{column} 是elment函数自己的参数.
      return h('span', {}, [
        h('span', {}, ''),
        h('el-popover', { props: { placement: 'top', width: '200', trigger: 'hover', content: `${name}` }}, [
          h('span', { slot: 'reference' }, [
            h('span', {}, column.label),
            h('span', { class: 'el-icon-question', color: 'black' })
          ])
        ])
      ])
    },
复制代码

结语

方法都很简单, 也并不难想, 只是要花点时间,转换下思惟. 但愿能有帮助.