百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

Vue通信揭秘:深入理解$emit与$on的真谛

bigegpt 2025-04-01 16:05 11 浏览

在Vue的组件化世界里,组件间的通信是构建复杂应用的关键。Vue为此提供了一套简洁的通信机制,其中$emit和$on作为这一机制的重要组成部分,扮演着事件派发与事件监听的角色。本文旨在深入解析$emit与$on的原理与应用,并通过示例代码,揭示它们在Vue通信中的本质作用。

$emit:事件派发的使者

在Vue中,$emit用于子组件向父组件派发事件。当子组件中发生了某个动作或状态变化,需要通知父组件时,就可以通过$emit来实现。它允许你发送自定义事件,并且能够携带数据作为参数。

原理:

  • 子组件调用$emit,Vue内部会触发相应的事件监听器。
  • 父组件通过在模板中使用v-on或在组件上直接监听这个事件,从而响应子组件的通知。

示例代码:

子组件:



<script>
export default {
  methods: {
    notifyParent() {
      // 派发自定义事件,可以携带参数
      this.$emit('custom-event', 'Hello, parent!');
    }
  }
}
</script>

父组件:



<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(msg) {
      console.log(msg); // 输出:Hello, parent!
    }
  }
}
</script>

$on:事件监听的守望者

$on用于监听由$emit派发的事件。它允许组件在其生命周期内等待特定事件的发生,并定义当这些事件发生时应该执行的行为。

原理:

  • 组件使用$on注册事件监听器。
  • 当该事件被$emit派发时,所有注册了监听该事件的处理函数都会被调用。

注意:Vue 3中的Composition API不再支持$on,推荐使用provide和inject或其他全局状态管理来替代。

与on的搭配使用

$emit和$on的组合使用使得Vue组件间的通信变得灵活而高效。通过自定义事件的派发和监听,可以实现父子组件间,甚至兄弟组件间的解耦通信。

总结

通过对$emit与$on的深入分析,我们理解了Vue组件间通信的一种核心机制。尽管Vue 3鼓励使用更为现代的通信方式,但这两个方法在Vue 2中仍然是实现组件通信的重要手段。理解它们的工作原理,不仅能帮助你更好地利用Vue进行开发,还能加深你对Vue框架设计哲学的理解。


探索Vue的魅力远不止于此,无论是组件通信、状态管理还是其他高级特性,Vue都有着丰富而灵活的解决方案。如果你对$emit、$on或者Vue的其他特性有更多思考或问题,欢迎在评论区交流探讨。让我们一同在Vue的世界中不断前行,探索更多可能!

相关推荐

Go语言泛型-泛型约束与实践(go1.7泛型)

来源:械说在Go语言中,Go泛型-泛型约束与实践部分主要探讨如何定义和使用泛型约束(Constraints),以及如何在实际开发中利用泛型进行更灵活的编程。以下是详细内容:一、什么是泛型约束?**泛型...

golang总结(golang实战教程)

基础部分Go语言有哪些优势?1简单易学:语法简洁,减少了代码的冗余。高效并发:内置强大的goroutine和channel,使并发编程更加高效且易于管理。内存管理:拥有自动垃圾回收机制,减少内...

Go 官宣:新版 Protobuf API(go pro版本)

原文作者:JoeTsai,DamienNeil和HerbieOng原文链接:https://blog.golang.org/a-new-go-api-for-protocol-buffer...

Golang开发的一些注意事项(一)(golang入门项目)

1.channel关闭后读的问题当channel关闭之后再去读取它,虽然不会引发panic,但会直接得到零值,而且ok的值为false。packagemainimport"...

golang 托盘菜单应用及打开系统默认浏览器

之前看到一个应用,用go语言编写,说是某某程序的windows图形化客户端,体验一下发现只是一个托盘,然后托盘菜单的控制面板功能直接打开本地浏览器访问程序启动的webserver网页完成gui相关功...

golang标准库每日一库之 io/ioutil

一、核心函数概览函数作用描述替代方案(Go1.16+)ioutil.ReadFile(filename)一次性读取整个文件内容(返回[]byte)os.ReadFileioutil.WriteFi...

文件类型更改器——GoLang 中的 CLI 工具

我是如何为一项琐碎的工作任务创建一个简单的工具的,你也可以上周我开始玩GoLang,它是一种由Google制作的类C编译语言,非常轻量和快速,事实上它经常在Techempower的基准测...

Go (Golang) 中的 Channels 简介(golang channel长度和容量)

这篇文章重点介绍Channels(通道)在Go中的工作方式,以及如何在代码中使用它们。在Go中,Channels是一种编程结构,它允许我们在代码的不同部分之间移动数据,通常来自不同的goro...

Golang引入泛型:Go将Interface「」替换为“Any”

现在Go将拥有泛型:Go将Interface{}替换为“Any”,这是一个类型别名:typeany=interface{}这会引入了泛型作好准备,实际上,带有泛型的Go1.18Beta...

一文带你看懂Golang最新特性(golang2.0特性)

作者:腾讯PCG代码委员会经过十余年的迭代,Go语言逐渐成为云计算时代主流的编程语言。下到云计算基础设施,上到微服务,越来越多的流行产品使用Go语言编写。可见其影响力已经非常强大。一、Go语言发展历史...

Go 每日一库之 java 转 go 遇到 Apollo?让 agollo 来平滑迁移

以下文章来源于GoOfficialBlog,作者GoOfficialBlogIntroductionagollo是Apollo的Golang客户端Apollo(阿波罗)是携程框架部门研...

Golang使用grpc详解(golang gcc)

gRPC是Google开源的一种高性能、跨语言的远程过程调用(RPC)框架,它使用ProtocolBuffers作为序列化工具,支持多种编程语言,如C++,Java,Python,Go等。gR...

Etcd服务注册与发现封装实现--golang

服务注册register.gopackageregisterimport("fmt""time"etcd3"github.com/cor...

Golang:将日志以Json格式输出到Kafka

在上一篇文章中我实现了一个支持Debug、Info、Error等多个级别的日志库,并将日志写到了磁盘文件中,代码比较简单,适合练手。有兴趣的可以通过这个链接前往:https://github.com/...

如何从 PHP 过渡到 Golang?(php转golang)

我是PHP开发者,转Go两个月了吧,记录一下使用Golang怎么一步步开发新项目。本着有坑填坑,有错改错的宗旨,从零开始,开始学习。因为我司没有专门的Golang大牛,所以我也只能一步步自己去...