Vue?$event作為參數(shù)傳遞使用demo
1.在原生事件中, $event 參數(shù)是事件對象
<a-button @click="getEvent($event)">點(diǎn)擊</a-button>
getEvent(e){
console.log(e) //事件對象
//e.target 當(dāng)前點(diǎn)擊的元素
//e.currentTarget 綁定事件的元素
//e.currentTarget.someMethodxxx()
}2.在自定義事件中,$event 是傳遞過來的參數(shù)數(shù)據(jù)
父組件
<template slot="caseBlackLogSlot" slot-scope="text, record">
<table-cell-edit
:disable-cell="disableCell"
:text="record.caseBlackLog"
@change="cellChange(record.id, 'caseBlackLog', $event)"
></table-cell-edit>
</template>
methods: {
// value 是子組件傳過來的數(shù)據(jù)
cellChange(key, dataIndex, value) {
for (let i = 0; i < this.dataSource.length; i++) {
if (key === this.dataSource[i].id) {
this.dataSource[i][dataIndex] = value
break
}
}
this.$refs.webflow.setFieldValue('childTableInline1', this.dataSource)
}子組件
<template>
<div>
<a-input
:disabled="disableFlg"
style="width: 100px"
:value="value"
@change="handleChanged"
@blur="blur"
/>
</div>
</template>
<script>
import components from './_import-components/table-cell-edit-import'
export default {
name: 'TableCellEdit',
metaInfo: {
title: 'TableCellEdit',
},
components,
props: {
text: String,
disableCell: Boolean,
},
data() {
return {
value: this.text,
disableFlg: this.disableCell,
}
},
methods: {
blur() {
// $emit 向上傳遞數(shù)據(jù)
this.$emit('change', this.value)
},
handleChanged(e) {
//這里的e,就是第一種 :$event 事件對象參數(shù)
this.value = e.target.value
},
},
}
</script>
<style module lang="scss">
@use '@/common/design' as *;
</style>以上就是Vue $event作為參數(shù)傳遞使用demo的詳細(xì)內(nèi)容,更多關(guān)于Vue$event參數(shù)傳遞的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Ant Design Vue table中列超長顯示...并加提示語的實(shí)例
這篇文章主要介紹了Ant Design Vue table中列超長顯示...并加提示語的實(shí)例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
ant?菜單組件報(bào)錯(cuò)Cannot?read?property?‘isRootMenu‘?of?undefin
這篇文章主要介紹了ant?菜單組件報(bào)錯(cuò)Cannot?read?property?‘isRootMenu‘?of?undefined解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vue移動(dòng)端實(shí)現(xiàn)圖片上傳及超過1M壓縮上傳
這篇文章主要為大家詳細(xì)介紹了Vue移動(dòng)端實(shí)現(xiàn)圖片上傳及超過1M壓縮上傳,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12
Vue3實(shí)現(xiàn)pdf在線預(yù)覽的三種方式
這篇文章主要為大家詳細(xì)介紹了使用Vue3實(shí)現(xiàn)pdf在線預(yù)覽的三種常用方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-02-02
elementUI同一頁面展示多個(gè)Dialog的實(shí)現(xiàn)
這篇文章主要介紹了elementUI同一頁面展示多個(gè)Dialog的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
vue-admin-template配置快捷導(dǎo)航的代碼(標(biāo)簽導(dǎo)航欄)
這篇文章主要介紹了vue-admin-template配置快捷導(dǎo)航的方法(標(biāo)簽導(dǎo)航欄),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09

