Vue自定义事件：触发自定义事件

一 项目结构

二 子组件（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>

三 父组件（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>

四 运行效果