Vue中父組件使用子組件的emit事件,獲取emit事件傳出的值並添加父組件額外的參數進行操作


需求是這樣的,需要輸入這樣一個列表的數據,可以手動添加行,每一行中客戶編號跟客戶姓名是自動關聯的,就是說選取了客戶姓名之后,客戶編號是自動填充的,客戶姓名是一個獨立的組件,每一個下拉項都是一個大的對象,里面包含客戶的所有信息,通過下拉列表可以獲取客戶姓名,但是一旦選取之后,客戶姓名這個字段就固定了,即為客戶的id,所以想通過<template slot-scope="scope">{{scope.row.XXX}}</template>這種方式是拿不到的,然后想通過value-key的形式呢,發現這個已經封裝好的組件中還不支持折中value-key的方式,只有下拉列表選擇發生變化時,觸發change事件,this.$emit('select', item),那么在父組件中通過接收事件,就可以獲取item,是這樣的:

<el-table-column prop="patientid" label="客戶姓名">
<template slot-scope="scope">
<span v-if="id">{{scope.row.patientName}}</span>
<template v-else>
<ever-patient-select @select="selectPatient(item)" v-model="scope.row.patientid"></ever-patient-select>
</template>
</template>
</el-table-column>

但是問題來了,由於table有多行,如何知道事件發生在哪一行,然后修改對應的行的客戶編號呢?我們知道table中可以傳入scope.$index,來標記行,然后修改table的data[index].patientCode就可以了,但是問題就在於如果直接將$index放進函數,@select="selectPatient($index,item)"或是這樣@select="selectPatient(item,$index)",你會發現都不好使,都會影響子組件向外傳遞他的item值,

那么有沒有方法,既不影響子組件向外傳遞的值,又可以在函數中添加自己的額外參數呢,經過一番查找,發現是可以的,可以這樣寫@select="selectPatient($event, $index)",然后在處理函數中第一個參數就是子組件傳出的item的對象值,第二個就是index標識。

目的達到了,需求也完成了,那么我們不禁要問,這個$event究竟是個什么東東呢?

去官網查找,找到了這樣一個例子:

/*************2018-12-03**************/ 

到這里本以為結束了,發現一個問題,如果子組件想傳多個參數出來,比如$emit("change", arg1,arg2,...),使用$event是否依然可以代表子組件傳出來的值?經過測試,發現如果如父組件中依然使用@select="selectPatient($event, $index)"這樣的寫法,發現$event只代表第一個參數arg1,所以這樣的話,可以能子組件就要改變寫法了,把所有參數包裝成一個對象,$event就可以傳過來了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM