前端工作小结65-自定义事件

前端歌谣

已于 2022-09-02 20:57:02 修改

阅读量52

点赞数

文章标签：前端 javascript vue.js

于 2022-09-02 20:53:22 首次发布

本文链接：https://blog.csdn.net/qq_41632427/article/details/126670298

版权

前端-工作简单记录-工作专栏收录该内容

332 篇文章 4 订阅

订阅专栏

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>