关于前端:Vue-中event-作为参数传递

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) {this.value = e.target.value},
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>