Vue自定义事件 简单案例

首先我们在APP.vue组件中有如下

<template>
  <div id="app">
 <h2>小明的爸爸现状有{{money}}元</h2>
 <childComp :money="money" @waste="money = $event"></childComp>
  </div>
</template>

首先我们通过 prop 从父组件将数据传递给子组件

同时,监听子组件抛出的 waste 事件,当事件触发时,更新父组件的 money 数据为事件的参数 $event。

子组件中有如下代码

  <button @click="$emit('waste',money-100)">-100</button>

当然使用methods更为好理解

 <button @click="decMoney">-100</button>



methods: {
  decMoney(){
   this.$emit('waste',this.money-100)
  }
},

在按钮的 click 事件中,通过 $emit() 派发 waste 自定义事件,并传递事件参数 money - 100。

总结:

自定义事件是 Vue 中实现组件间通信的一种方式。它具有以下特征:- 事件由组件触发,使用 this.$emit() 方法,并传入事件名称和参数
- 事件由另一个组件监听,使用 @eventname="handler" 的语法
- 事件允许数据从触发事件的组件流向监听事件的组件
- 事件名称是开发者自定义的,不是原生 DOM 事件