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参数传递的资料请关注脚本之家其它相关文章!
相关文章
TypeScript基本类型 typeof 和keyof案例详解
这篇文章主要介绍了TypeScript基本类型 typeof 和keyof案例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-10-10vue之父子组件间通信实例讲解(props、$ref、$emit)
组件间如何通信,也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信。2018-05-05Vue echarts实例项目地区销量趋势堆叠折线图实现详解
Echarts,它是一个与框架无关的 JS 图表库,但是它基于Js,这样很多框架都能使用它,例如Vue,估计IONIC也能用,因为我的习惯,每次新尝试做一个功能的时候,总要新创建个小项目,做做Demo2022-09-09
最新评论