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 當前點擊的元素 //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的詳細內(nèi)容,更多關(guān)于Vue$event參數(shù)傳遞的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Ant Design Vue table中列超長顯示...并加提示語的實例
這篇文章主要介紹了Ant Design Vue table中列超長顯示...并加提示語的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10ant?菜單組件報錯Cannot?read?property?‘isRootMenu‘?of?undefin
這篇文章主要介紹了ant?菜單組件報錯Cannot?read?property?‘isRootMenu‘?of?undefined解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08elementUI同一頁面展示多個Dialog的實現(xiàn)
這篇文章主要介紹了elementUI同一頁面展示多個Dialog的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-11-11vue-admin-template配置快捷導航的代碼(標簽導航欄)
這篇文章主要介紹了vue-admin-template配置快捷導航的方法(標簽導航欄),本文通過實例代碼給大家介紹的非常詳細,對大家學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09