Vue $event作为参数传递使用demo
作者：CUI_PING
这篇文章主要介绍了Vue $event作为参数传递使用demo详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
1.在原生事件中， $event 参数是事件对象
<a-button @click="getEvent($event)">点击</a-button>
getEvent(e){
console.log(e) //事件对象
//e.target 当前点击的元素
//e.currentTarget 绑定事件的元素
//e.currentTarget.someMethodxxx()
}2.在自定义事件中，$event 是传递过来的参数数据
父组件
<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 是子组件传过来的数据
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 向上传递数据
this.$emit('change', this.value)
},
handleChanged(e) {
//这里的e，就是第一种 ：$event 事件对象参数
this.value = e.target.value
},
},
}
</script>
<style module lang="scss">
@use '@/common/design' as *;
</style>以上就是Vue $event作为参数传递使用demo的详细内容，更多关于Vue$event参数传递的资料请关注脚本之家其它相关文章！