vue2和vue3组件之间的通信方式差异
Vue2 vs Vue3 组件通信方法对比
1. 父子组件通信
1.1 Props 传递
Vue2
<!-- 父组件 -->
<template><child-component :message="message"></child-component>
</template><script>
export default {data() {return {message: 'Hello'}}
}
</script><!-- 子组件 -->
<script>
export default {props: {message: String}
}
</script>
Vue3
<!-- 父组件 -->
<template><child-component :message="message"></child-component>
</template><script setup>
import { ref } from 'vue'
const message = ref('Hello')
</script><!-- 子组件 -->
<script setup>
defineProps({message: String
})
</script>
1.2 自定义事件
Vue2
<!-- 子组件 -->
<template><button @click="handleClick">点击</button>
</template><script>
export default {methods: {handleClick() {this.$emit('custom-event', { data: 'value' })}}
}
</script><!-- 父组件 -->
<template><child @custom-event="handleEvent"></child>
</template><script>
export default {methods: {handleEvent(data) {console.log(data)}}
}
</script>
Vue3
<!-- 子组件 -->
<template><button @click="handleClick">点击</button>
</template><script setup>
const emit = defineEmits(['custom-event'])const handleClick = () => {emit('custom-event', { data: 'value' })
}
</script><!-- 父组件 -->
<template><child @custom-event="handleEvent"></child>
</template><script setup>
const handleEvent = (data) => {console.log(data)
}
</script>
2. 跨层级组件通信
2.1 provide/inject
Vue2
<!-- 祖先组件 -->
<script>
export default {provide() {return {theme: this.theme,updateTheme: this.updateTheme}},data() {return {theme: 'dark'}},methods: {updateTheme(value) {this.theme = value}}
}
</script><!-- 后代组件 -->
<script>
export default {inject: ['theme', 'updateTheme']
}
</script>
Vue3
<!-- 祖先组件 -->
<script setup>
import { provide, ref } from 'vue'const theme = ref('dark')
const updateTheme = (value) => {theme.value = value
}provide('theme', {theme,updateTheme
})
</script><!-- 后代组件 -->
<script setup>
import { inject } from 'vue'const { theme, updateTheme } = inject('theme')
</script>
2.2 事件总线
Vue2
// eventBus.js
import Vue from 'vue'
export const eventBus = new Vue()// 组件 A
this.eventBus.$emit('custom-event', data)// 组件 B
mounted() {this.eventBus.$on('custom-event', this.handleEvent)
},
beforeDestroy() {this.eventBus.$off('custom-event', this.handleEvent)
}
Vue3
// eventBus.ts
import mitt from 'mitt'
export const emitter = mitt()// 组件 A
import { emitter } from './eventBus'
emitter.emit('custom-event', data)// 组件 B
import { onMounted, onUnmounted } from 'vue'
import { emitter } from './eventBus'onMounted(() => {emitter.on('custom-event', handleEvent)
})onUnmounted(() => {emitter.off('custom-event', handleEvent)
})
3. 访问组件实例
3.1 ref 引用
Vue2
<!-- 父组件 -->
<template><child-component ref="childRef"></child-component>
</template><script>
export default {mounted() {console.log(this.$refs.childRef.someData)this.$refs.childRef.someMethod()}
}
</script><!-- 子组件 -->
<script>
export default {data() {return {someData: 'value'}},methods: {someMethod() {// ...}}
}
</script>
Vue3
<!-- 父组件 -->
<template><child-component ref="childRef"></child-component>
</template><script setup>
import { ref, onMounted } from 'vue'const childRef = ref(null)onMounted(() => {console.log(childRef.value.someData)childRef.value.someMethod()
})
</script><!-- 子组件 -->
<script setup>
import { ref } from 'vue'const someData = ref('value')
const someMethod = () => {// ...
}defineExpose({someData,someMethod
})
</script>
3.2 父组件访问
Vue2
<!-- 子组件 -->
<script>
export default {methods: {accessParent() {console.log(this.$parent.parentData)this.$parent.parentMethod()}}
}
</script>
Vue3
<!-- 子组件 -->
<script setup>
import { getCurrentInstance } from 'vue'const { proxy } = getCurrentInstance()
const accessParent = () => {console.log(proxy.$parent.parentData)proxy.$parent.parentMethod()
}
</script>
4. 主要差异总结
-
语法差异
- Vue2 使用选项式 API
- Vue3 推荐使用组合式 API 和
<script setup>
-
事件总线
- Vue2 可以使用 Vue 实例作为事件总线
- Vue3 移除了 $on, $off 等方法,需要使用第三方库(如 mitt)
-
组件实例访问
- Vue2 可以直接访问组件实例的所有属性和方法
- Vue3 需要通过 defineExpose 显式暴露要访问的属性和方法
-
响应式系统
- Vue2 使用 Object.defineProperty
- Vue3 使用 Proxy,提供了更好的响应式支持
-
性能优化
- Vue3 提供了更好的性能优化机制
- 组件通信的性能开销更小
5. 最佳实践建议
-
迁移策略
- 逐步从 Vue2 迁移到 Vue3
- 优先使用 Vue3 的新特性
- 保持代码的一致性
-
代码组织
- Vue3 中更推荐使用组合式 API
- 将相关的逻辑组织在一起
- 使用 hooks 复用逻辑
-
性能优化
- 合理使用响应式数据
- 避免不必要的组件通信
- 及时清理事件监听器
相关文章:
vue2和vue3组件之间的通信方式差异
Vue2 vs Vue3 组件通信方法对比 1. 父子组件通信 1.1 Props 传递 Vue2 <!-- 父组件 --> <template><child-component :message"message"></child-component> </template><script> export default {data() {return {message:…...
报错:MC1000未知的生成错误Invalid number of sections declared in PE header
报错:MC1000未知的生成错误Invalid number of sections declared in PE header 报错问题: MC1000未知的生成错误Invalid number of sections declared in PE header 开发环境:vs2022,编译C#工程时报错, 解决办法:重新…...
FPGA实现任意角度视频旋转(二)视频90度/270度无裁剪旋转
本文主要介绍如何基于FPGA实现视频的90度/270度无裁剪旋转,旋转效果示意图如下: 为了实时对比旋转效果,采用分屏显示进行处理,左边代表旋转前的视频在屏幕中的位置,右边代表旋转后的视频在屏幕中的位置。 分屏显示的…...
Linux(Centos 7.6)命令详解:wc
1.命令作用 打印文件的行数、单词数、字节数,如果指定了多个文件,还会打印以上三种数据的总和(Print newline, word, and byte counts for each FILE, and a total line if more than one FILE is specified) 2.命令语法 Usage: wc [OPTION]... [FIL…...
centos7执行yum操作时报错Could not retrieve mirrorlist http://mirrorlist.centos.org解决
**原因:**CentOS 7 的官方仓库在 2024 年 6 月 30 日之后已经停止维护,不需要再去检查什么网络、DNS等乱七八糟的,因为这玩意都停止维护了,就算其他配置正常也照样不通。 **解决:**将CentOS-Base.repo文件替换成下面的…...
C语言程序设计:算法程序的灵魂
文章目录 C语言程序设计:算法程序的灵魂算法数据结构程序数据结构算法数值运算算法非数值运算算法 简单的算法举例【例2.1】求12345【例2.2】有50个学生,要求输出成绩在80分以上的学生的学号和成绩 简单的算法举例【例2.3】判定2000—2500年中的每一年是…...
openlayer getLayerById 根据id获取layer图层
背景: 在项目中使用getLayerById获取图层,这个getLayerById()方法不是openlayer官方文档自带的,而是自己封装的一个方法,这个封装的方法的思路是:遍历所有的layer,根据唯一标识【可能是id,也可能…...
在 vscode + cmake + GNU 工具链的基础上配置 JLINK
安装 JLINK JLINK 官网链接 下载安装后找到安装路径下的可执行文件 将此路径添加到环境变量的 Path 中。 创建 JFlash 项目 打开 JFlash,选择新建项目 选择单片机型号 在弹出的窗口中搜索单片机 其他参数根据实际情况填写 新建完成: 接下来设置…...
react antd点击table单元格文字下载指定的excel路径
在使用 Ant Design (antd) 的 Table 组件时,如果想点击表格单元格中的文字来触发下载指定路径的 Excel 文件,可以通过以下步骤实现: 1. 确保有一个可供下载的 Excel 文件:需要有一个服务器端点或者一个可以直接访问的 URL…...
01-AD工具使用
01-AD工具使用 AD工程创建1.创建Project工程2.创建原理图&&PCB文件3.保存活动和整个文档 创建新元件的能力导入已有素材:元件库的能力创建各种类型元器件的方法元器件TYPE-C 3.1 母头 16P插头AMS1117-3.3电源芯片STM32F103的IC芯片C2-104电容R4-1K电阻D1发光二极管 原理…...
centos7 配置国内镜像源安装 docker
使用国内镜像源:由于 Docker 的官方源在国内访问可能不稳定,你可以使用国内的镜像源,如阿里云的镜像源。手动创建 /etc/yum.repos.d/docker-ce.repo 文件,并添加以下内容: [docker-ce-stable] nameDocker CE Stable -…...
Java设计模式 十八 状态模式 (State Pattern)
状态模式 (State Pattern) 状态模式是一种行为型设计模式,它允许对象在其内部状态改变时改变其行为。状态模式让一个对象在其状态改变时,其行为也随之改变,看起来就像是改变了对象的类。通过将状态的变化封装到不同的状态对象中,…...
PyTorch张量操作reshape view permute transpose
1. reshape() 和 view() view和reshape都用于改变张量的shape view是reshape的一个特例,view要求张量在内存中是连续的,否则会抛出错误,view只能用于contiguous的张量 reshape会自动处理contiguous的情况,如果张量是contiguous…...
RabbitMQ5-死信队列
目录 死信的概念 死信的来源 死信实战 死信之TTl 死信之最大长度 死信之消息被拒 死信的概念 死信,顾名思义就是无法被消费的消息,一般来说,producer 将消息投递到 broker 或直接到queue 里了,consumer 从 queue 取出消息进…...
macOS使用LLVM官方发布的tar.xz来安装Clang编译器
之前笔者写过一篇博文ubuntu使用LLVM官方发布的tar.xz来安装Clang编译器介绍了Ubuntu下使用官方发布的tar.xz包来安装Clang编译。官方发布的版本中也有MacOS版本的tar.xz,那MacOS应该也是可以安装的。 笔者2015款MBP笔记本,CPU是intel的,出厂…...
【算法学习】归并排序算法思想的应用—求逆序对数量
Hey,大家好!👋 今天我们来聊聊一个有趣的话题——如何在归并排序的基础上,高效解决求逆序对数量的问题。如果你对算法感兴趣,或者正在准备算法面试,这篇文章一定会对你有所帮助!🚀 …...
一组开源、免费、Metro风格的 WPF UI 控件库
前言 今天大姚给大家分享一个开源、免费、Metro风格的 WPF UI 控件库:MahApps.Metro。 项目介绍 MahApps.Metro 是一个开源、免费、Metro风格的 WPF UI 控件库,提供了现代化、平滑和美观的控件和样式,帮助开发人员轻松创建具有现代感的 Win…...
Spring Security 应用详解
Spring Security 应用详解 集成SpringBootSpring Boot 介绍创建maven工程spring 容器配置Servlet Context配置安全配置测试 工作原理结构总览认证流程认证流程AuthenticationProviderUserDetailsServicePasswordEncoder 授权流程授权流程授权决策 自定义认证自定义登录页面认证…...
业务对象和对象的区别
"业务对象"和"对象"这两个术语在日常编程和软件工程中经常被使用,但它们之间存在一些区别,主要体现在它们的目的、范围和抽象层次上。 ### 对象(Object) 1. **定义**: - 对象是面向对象编程&#…...
81,【5】BUUCTF WEB [b01lers2020]Life on Mars
进入靶场 怎莫颠颠的,一下子就想到展博了 先把左边的挨个点一遍 在最后一个有点收获 不过也没其他收获了 这种进去给个正常网页的题目,基本都靠url获取信息了 抓包看看有没有其他信息 竟然没有任何信息 自闭了 看别人的wp去咯 为什么别人抓到的包里…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
VTK如何让部分单位不可见
最近遇到一个需求,需要让一个vtkDataSet中的部分单元不可见,查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行,是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示,主要是最后一个参数,透明度…...
基于 TAPD 进行项目管理
起因 自己写了个小工具,仓库用的Github。之前在用markdown进行需求管理,现在随着功能的增加,感觉有点难以管理了,所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD,需要提供一个企业名新建一个项目&#…...
Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)
引言 在人工智能飞速发展的今天,大语言模型(Large Language Models, LLMs)已成为技术领域的焦点。从智能写作到代码生成,LLM 的应用场景不断扩展,深刻改变了我们的工作和生活方式。然而,理解这些模型的内部…...
jmeter聚合报告中参数详解
sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample(样本数) 表示测试中发送的请求数量,即测试执行了多少次请求。 单位,以个或者次数表示。 示例:…...
HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散
前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说,在叠衣服的过程中,我会带着团队对比各种模型、方法、策略,毕竟针对各个场景始终寻找更优的解决方案,是我个人和我司「七月在线」的职责之一 且个人认为,…...
Unity中的transform.up
2025年6月8日,周日下午 在Unity中,transform.up是Transform组件的一个属性,表示游戏对象在世界空间中的“上”方向(Y轴正方向),且会随对象旋转动态变化。以下是关键点解析: 基本定义 transfor…...
快速排序算法改进:随机快排-荷兰国旗划分详解
随机快速排序-荷兰国旗划分算法详解 一、基础知识回顾1.1 快速排序简介1.2 荷兰国旗问题 二、随机快排 - 荷兰国旗划分原理2.1 随机化枢轴选择2.2 荷兰国旗划分过程2.3 结合随机快排与荷兰国旗划分 三、代码实现3.1 Python实现3.2 Java实现3.3 C实现 四、性能分析4.1 时间复杂度…...
pgsql:还原数据库后出现重复序列导致“more than one owned sequence found“报错问题的解决
问题: pgsql数据库通过备份数据库文件进行还原时,如果表中有自增序列,还原后可能会出现重复的序列,此时若向表中插入新行时会出现“more than one owned sequence found”的报错提示。 点击菜单“其它”-》“序列”,…...
WEB3全栈开发——面试专业技能点P4数据库
一、mysql2 原生驱动及其连接机制 概念介绍 mysql2 是 Node.js 环境中广泛使用的 MySQL 客户端库,基于 mysql 库改进而来,具有更好的性能、Promise 支持、流式查询、二进制数据处理能力等。 主要特点: 支持 Promise / async-await…...
