首先我们在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 事件