Vue?$event作為參數(shù)傳遞使用demo
更新時間:2023年07月03日 10:30:02 作者:CUI_PING
這篇文章主要介紹了Vue?$event作為參數(shù)傳遞使用demo詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
1.在原生事件中, $event 參數(shù)是事件對象
<a-button @click="getEvent($event)">點擊</a-button>
getEvent(e){
console.log(e) //事件對象
//e.target 當(dāng)前點擊的元素
//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中列超長顯示...并加提示語的實例
這篇文章主要介紹了Ant Design Vue table中列超長顯示...并加提示語的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
ant?菜單組件報錯Cannot?read?property?‘isRootMenu‘?of?undefin
這篇文章主要介紹了ant?菜單組件報錯Cannot?read?property?‘isRootMenu‘?of?undefined解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
elementUI同一頁面展示多個Dialog的實現(xiàn)
這篇文章主要介紹了elementUI同一頁面展示多個Dialog的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(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)航欄),本文通過實例代碼給大家介紹的非常詳細(xì),對大家學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09

