对于vue中$emit的理解

最新推荐文章于 2025-03-25 11:13:29 发布

Kumiko1936

最新推荐文章于 2025-03-25 11:13:29 发布

阅读量3.1k

点赞数 7

文章标签： vue js

本文链接：https://blog.csdn.net/shuairan1999/article/details/106898883

版权

本文介绍了Vue中$emit的用法，通过$emit子组件能够触发父组件定义的自定义事件，从而实现调用父组件的方法。示例展示了如何在子组件中触发事件并传递参数，以及在父组件中如何监听并处理这些事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$emit

emit的意思是发出、射出。
子组件可以通过props接收父组件传递过来的数据。
子组件也可以用过$emit来触发父组件的自定事件，再说的通俗易懂一些就是子组件可以调用父组件的方法。

用法

$emit( eventName, […args] )

eventName：这是一个事件名，会绑定一个方法。当组件触发事件后，将调用这个方法。
[…args]：附加的参数，会被抛出，由上述绑定的方法接收使用。

例子

子组件：

<template>
  <button @click="emitEvent">点击我</button>
</template>
<script>
  export default {
    data() {
      return {
        msg: "我是子组件中的数据"
      }
    },
    methods: {
      emitEvent(){
        this.$emit('myEvent', this.msg)
        //通过按钮的点击事件触发方法，然后用$emit触发父组件中自定义的方法getMyEvent()，并传递data中的msg。
      }
    }
  }
</script>

父组件：

<template>
  <div id="app">
    <child @myEvent="getMyEvent"></child>
  </div>
</template>
<script>
  import Child from './components/child.vue'
  export default {
    components: {
      Child
    },
    methods: {
      getMyEvent(msg){
          console.log('从子组件中接收到的数据：'+msg)//接收的数据--------->我是子组件中的数据
      }
    }
  }
</script>