子向父傳值, 自定義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' })
          ])
        ])
      ])
    },
複製代碼

結語

方法都很簡單, 也並不難想, 只是要花點時間,轉換下思惟. 但願能有幫助.