Vue?$event作為參數(shù)傳遞使用demo
1.在原生事件中, $event 參數(shù)是事件對(duì)象
<a-button @click="getEvent($event)">點(diǎn)擊</a-button> getEvent(e){ console.log(e) //事件對(duì)象 //e.target 當(dāng)前點(diǎn)擊的元素 //e.currentTarget 綁定事件的元素 //e.currentTarget.someMethodxxx() }
2.在自定義事件中,$event 是傳遞過(guò)來(lái)的參數(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 是子組件傳過(guò)來(lái)的數(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 事件對(duì)象參數(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ù)傳遞的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Ant Design Vue table中列超長(zhǎng)顯示...并加提示語(yǔ)的實(shí)例
這篇文章主要介紹了Ant Design Vue table中列超長(zhǎng)顯示...并加提示語(yǔ)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10Vite配置路徑別名的簡(jiǎn)單實(shí)現(xiàn)方法
Vite項(xiàng)目中我們可以手動(dòng)將src路徑設(shè)置**@**路徑別名,可以省下很多引入路徑的冗余路徑,下面這篇文章主要給大家介紹了關(guān)于Vite配置路徑別名的簡(jiǎn)單實(shí)現(xiàn)方法,需要的朋友可以參考下2023-04-04ant?菜單組件報(bào)錯(cuò)Cannot?read?property?‘isRootMenu‘?of?undefin
這篇文章主要介紹了ant?菜單組件報(bào)錯(cuò)Cannot?read?property?‘isRootMenu‘?of?undefined解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08Vue移動(dòng)端實(shí)現(xiàn)圖片上傳及超過(guò)1M壓縮上傳
這篇文章主要為大家詳細(xì)介紹了Vue移動(dòng)端實(shí)現(xiàn)圖片上傳及超過(guò)1M壓縮上傳,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12Vue3實(shí)現(xiàn)pdf在線預(yù)覽的三種方式
這篇文章主要為大家詳細(xì)介紹了使用Vue3實(shí)現(xiàn)pdf在線預(yù)覽的三種常用方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-02-02elementUI同一頁(yè)面展示多個(gè)Dialog的實(shí)現(xiàn)
這篇文章主要介紹了elementUI同一頁(yè)面展示多個(gè)Dialog的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11vue-admin-template配置快捷導(dǎo)航的代碼(標(biāo)簽導(dǎo)航欄)
這篇文章主要介紹了vue-admin-template配置快捷導(dǎo)航的方法(標(biāo)簽導(dǎo)航欄),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09VUE3中watch監(jiān)聽(tīng)使用實(shí)例詳解
watch函數(shù)用來(lái)偵聽(tīng)特定的數(shù)據(jù)源,并在回調(diào)函數(shù)中執(zhí)行副作用,下面這篇文章主要給大家介紹了關(guān)于VUE3中watch監(jiān)聽(tīng)使用的相關(guān)資料,需要的朋友可以參考下2022-06-06