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

相关文章

  • Vue3 编译流程-源码解析

    Vue3 编译流程-源码解析

    今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥
    2021-09-09
  • vue3使用ref 获取不到子组件属性问题的解决办法

    vue3使用ref 获取不到子组件属性问题的解决办法

    父子组件使用<script setup>语法糖,父组件通过给子组件定义ref访问子组件内部属性或事件,本文给大家介绍了解决vue3使用ref 获取不到子组件属性问题,文中通过代码示例讲解的非常详细,需要的朋友可以参考下
    2024-06-06
  • Vue项目页面跳转时浏览器窗口上方显示进度条功能

    Vue项目页面跳转时浏览器窗口上方显示进度条功能

    这篇文章主要介绍了Vue项目页面跳转时浏览器窗口上方显示进度条功能,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • Vue插槽具体用法及实例分析

    Vue插槽具体用法及实例分析

    本文主要介绍了Vue框架中插槽的使用方法和应用场景。通过具体实例分析,详细讲解了插槽的具体用法,帮助读者深入理解Vue中插槽的使用和实现方式
    2023-05-05
  • vue ant design 封装弹窗表单的使用

    vue ant design 封装弹窗表单的使用

    这篇文章主要介绍了vue ant design 封装弹窗表单的使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue+element实现表格新增、编辑、删除功能

    vue+element实现表格新增、编辑、删除功能

    这篇文章主要为大家详细介绍了vue+element实现表格新增、编辑、删除功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • vue5中的事件修饰符(style)和template

    vue5中的事件修饰符(style)和template

    这篇文章主要介绍了vue5中的事件修饰符(style)和template,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue3 v-bind="$attrs"继承组件全部属性的解决方案

    vue3 v-bind="$attrs"继承组件全部属性的解决方案

    这篇文章主要介绍了vue3 v-bind=“$attrs“ 继承组件全部属性的解决方案,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • Vue 3 动态 ref 的使用方式以表格为列

    Vue 3 动态 ref 的使用方式以表格为列

    我正在开发的项目中,有一个表格组件,其中一列是分镜描述,需要支持视频上传功能,下面给大家介绍Vue 3动态ref的使用方式以表格为列给大家详细讲解,感兴趣的朋友一起看看吧
    2023-07-07
  • Vue中transition标签的基本使用教程

    Vue中transition标签的基本使用教程

    Vue提供了transition的封装组件,可以给任何元素和组件添加进入/离开过渡,下面这篇文章主要给大家介绍了关于Vue中transition标签基本使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08

最新评论