关于前端: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>