vue中给@相关的事件传递“额外“参数

Vue中传递额外参数给@事件

最新推荐文章于 2024-08-24 14:30:21 发布

原创最新推荐文章于 2024-08-24 14:30:21 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

在Vue开发中，当需要在父组件通过@事件监听子组件方法并传递额外参数，同时保持原有参数不变，可以利用$event来实现。本文介绍了如何使用$event在不改变默认参数的情况下添加额外参数。

场景：在开发中会遇到，当通过this. $e mi t 暴露给父组件的方法，因业务场景的需要，需要在父组件中传递额外的参数，这时该方法又有子组件传递过来的参数，需要在不改变该方法默认参数的情况下，额外传递参数，使用$ event 来传递，即可解决当前问题

在使用 v-on 或 @ 监听子组件发出的事件时，可以在监听函数中获取到子组件传递的数据，就像这样：

<!-- 父组件模板 -->
<template>
  <div>
    <child-component @child-event="handleChildEvent"></child-component>
  </div>
</template>

// 父组件方法
methods: {
  handleChildEvent(data) {
    console.log(data) // 子组件传递的数据
  }
}

如果需要在父组件传递额外的参数给监听函数，可以通过 $event 来传递。

<!-- 父组件模板 -->
<template>
  <div>
    <child-component @child-event="handleChildEvent($event )"></child-component>
  </div>
</template>
export default {
  name: 'Demo',
  data() {
    return {
      params: ''
    }
  },
  methods: {
    handleChildEvent(data, params) {
      console.log(data) // 子组件传递的数据
      console.log(params) // 父组件传递的数据
    }
  }
}