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参数传递的资料请关注脚本之家其它相关文章!

相关文章

  • vue 更改连接后台的api示例

    vue 更改连接后台的api示例

    今天小编就为大家分享一篇vue 更改连接后台的api示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue.js前后端数据交互之提交数据操作详解

    vue.js前后端数据交互之提交数据操作详解

    这篇文章主要介绍了vue.js前后端数据交互之提交数据操作,结合实例形式较为详细的分析了vue.js前后端数据交互相关的表单结构、约束规则、数据提交等相关操作技巧与注意事项,需要的朋友可以参考下
    2018-04-04
  • vue组件的写法汇总

    vue组件的写法汇总

    组件化是为了方便代码复用,提高开发效率。今天脚本之家小编给大家分享常见的vue组件写法四种,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2018-04-04
  • 详解如何在Electron中存取本地文件

    详解如何在Electron中存取本地文件

    在Electron 中,存取本地文件,有很多种办法,本文介绍最常用的一种办法, 通过 Electron 框架提供的能力,和 Node.js 的 fs 文件管理模块实现本地文件的存取,需要的小伙伴可以参考下
    2023-11-11
  • vue使用moment如何将时间戳转为标准日期时间格式

    vue使用moment如何将时间戳转为标准日期时间格式

    这篇文章主要介绍了vue使用moment如何将时间戳转为标准日期时间格式问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue3中<script setup> 和 setup函数的区别对比

    vue3中<script setup> 和 setup函数的区别对比

    这篇文章主要介绍了vue3中<script setup> 和 setup函数的区别,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue引入外部的js文件的10种方法总结

    vue引入外部的js文件的10种方法总结

    这篇文章主要为大家详细介绍了vue项目中引入外部的js文件的10种方法,文中的示例代码讲解详细,具有一定的借鉴价值,需要的小伙伴可以参考下
    2023-08-08
  • vue组件historyApiFallback作用详解

    vue组件historyApiFallback作用详解

    这篇文章主要为大家介绍了vue组件historyApiFallback作用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • Vue.set()实现数据动态响应的方法

    Vue.set()实现数据动态响应的方法

    这篇文章主要介绍了Vue.set()实现数据动态响应的相关知识,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02
  • Vue中jsx不完全应用指南小结

    Vue中jsx不完全应用指南小结

    这篇文章主要介绍了Vue中jsx不完全应用指南小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11

最新评论