Vue事件解读之$emit

最新推荐文章于 2025-05-05 15:01:52 发布

_FEE

最新推荐文章于 2025-05-05 15:01:52 发布

阅读量2.5w

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/Randy_Shenyp/article/details/64233570

版权

Vue 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨Vue中的自定义事件，重点解析$emit的使用。通过v-on或@语法糖绑定DOM事件，而自定义事件主要用于组件间通信。Vue 2.0中，$emit用于触发实例上的事件，传入事件名和可选参数。它返回的布尔值指示是否有监听器及处理程序的返回值。举例说明了如何在App.vue父组件中通过v-on监听子组件的自定义事件并响应。

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

Vue事件分两部分，一是DOM绑定事件，二是自定义事件。

DOM事件

在Vue中可通过v-on指令或事件语法糖@来为DOM元素绑定事件

<div v-on:click="doSomething"></div>
<div @click="doSomething"></div>

自定义事件

Vue自定义事件是为组件间通信设计，自定义事件提供$on、$off、$once、$emit、$broadcast、$dispatch 几个 api,只是在2.0版本中，$broadcast、$dispatch已不再使用。

$emit
参考Vue文档$emit

vm.$emit( event, […args] )
参数：
{string} event
[…args]//可选参数
触发当前实例上的事件。附加参数都会传给监听器回调。

$emit 返回一个布尔值，取决于父链上的是否存在该事件的监听器以及事件处理程序返回的值

// app.vue
<template>
  <test @childevent="childEventHandler"></test>
</template>
methods: {
    childEventHandler () {}
}
// test.vue
methods: {
    emitEvent () {
      this.$emit('childevent'/* , this.somedata */)
    }
}

示例，App.vue中v-on为组件绑定事件(自定义事件)，子组件通过$emit触发事件

//header.vue
<template>
    <a class="t-btn" @click="showTools"></a>
</template>
export default{
    methods: {
        showTools(){
            this.$emit('tools');
        }
    }
}

//App.vue
<template>
    <n-header @tools="changePages"></n-header>
</template>
export default{
    data(){
        return{
            tools:false,
            table:false
        }
    },
    methods:{
        changePages(){
            if(this.table){
                this.table = !this.table;
            }else{
                this.tools = !this.tools
            }
        }
    }
}