1子组件

mongo.vue

<template><button @click="eat">按钮</button>
</template><script>
export default {created() {this.$on("eat", function(fruit) {console.log("子组件接收自己发射的事件");});},methods: {eat() {console.log("子组件发射事件");this.$emit("eat", "芒果");}}
};
</script>
<style>
</style>

2父组件

app.vue

<template><div id="app"><h3>{{name}}</h3><!-- 子组件 --><mongo @eat='eat'/></div>
</template><script>
import Mongo from "./components/Mongo";export default {name: "app",data() {return {name: ""};},methods: {eat(fruit) {console.log("父组件接收事件");this.name = fruit;}},components: { Mongo }
};
</script><style>
</style>

运行结果