Vue $event作为参数传递使用demo
更新时间:2023年07月03日 10:30:02 作者: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参数传递的资料请关注脚本之家其它相关文章!
相关文章
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
vue-admin-template配置快捷导航的代码(标签导航栏)
这篇文章主要介绍了vue-admin-template配置快捷导航的方法(标签导航栏),本文通过实例代码给大家介绍的非常详细,对大家学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-09


最新评论