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中使用监听器的具体实践

    监听器是Vue3中非常好用的一个特性,用于监听某个响应式变量的变化,本文就来介绍一下Vue3中使用监听器的具体实践,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • vue项目前端加前缀(包括页面及静态资源)的操作方法

    vue项目前端加前缀(包括页面及静态资源)的操作方法

    这篇文章主要介绍了vue项目前端加前缀(包括页面及静态资源)的操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-12-12
  • Vuex之理解Store的用法

    Vuex之理解Store的用法

    本篇文章主要介绍了Vuex之理解Store的用法,Store类就是存储数据和管理数据方法的仓库,实现方式是将数据和方法已对象形式传入其实例中
    2017-04-04
  • TypeScript基本类型 typeof 和keyof案例详解

    TypeScript基本类型 typeof 和keyof案例详解

    这篇文章主要介绍了TypeScript基本类型 typeof 和keyof案例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-10-10
  • vue之父子组件间通信实例讲解(props、$ref、$emit)

    vue之父子组件间通信实例讲解(props、$ref、$emit)

    组件间如何通信,也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信。
    2018-05-05
  • Vue echarts实例项目地区销量趋势堆叠折线图实现详解

    Vue echarts实例项目地区销量趋势堆叠折线图实现详解

    Echarts,它是一个与框架无关的 JS 图表库,但是它基于Js,这样很多框架都能使用它,例如Vue,估计IONIC也能用,因为我的习惯,每次新尝试做一个功能的时候,总要新创建个小项目,做做Demo
    2022-09-09
  • Vue cli3.0创建Vue项目的简单过程记录

    Vue cli3.0创建Vue项目的简单过程记录

    Vue CLI是一个基于Vue.js进行快速开发的完整系统,下面这篇文章主要给大家介绍了关于Vue cli3.0创建Vue项目的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • jquery在vue脚手架中的使用方式示例

    jquery在vue脚手架中的使用方式示例

    本篇文章主要介绍了jquery在vue脚手架中的使用方式示例,非常具有实用价值,需要的朋友可以参考下
    2017-08-08
  • Vue结合原生js实现自定义组件自动生成示例

    Vue结合原生js实现自定义组件自动生成示例

    这篇文章主要介绍了Vue结合原生js实现自定义组件自动生成示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • vue-form表单验证是否为空值的实例详解

    vue-form表单验证是否为空值的实例详解

    今天小编就为大家分享一篇vue-form表单验证是否为空值的实例详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10

最新评论