当前位置: 首页 > news >正文

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. 主要差异总结

  1. 语法差异

    • Vue2 使用选项式 API
    • Vue3 推荐使用组合式 API 和 <script setup>
  2. 事件总线

    • Vue2 可以使用 Vue 实例作为事件总线
    • Vue3 移除了 $on, $off 等方法,需要使用第三方库(如 mitt)
  3. 组件实例访问

    • Vue2 可以直接访问组件实例的所有属性和方法
    • Vue3 需要通过 defineExpose 显式暴露要访问的属性和方法
  4. 响应式系统

    • Vue2 使用 Object.defineProperty
    • Vue3 使用 Proxy,提供了更好的响应式支持
  5. 性能优化

    • Vue3 提供了更好的性能优化机制
    • 组件通信的性能开销更小

5. 最佳实践建议

  1. 迁移策略

    • 逐步从 Vue2 迁移到 Vue3
    • 优先使用 Vue3 的新特性
    • 保持代码的一致性
  2. 代码组织

    • Vue3 中更推荐使用组合式 API
    • 将相关的逻辑组织在一起
    • 使用 hooks 复用逻辑
  3. 性能优化

    • 合理使用响应式数据
    • 避免不必要的组件通信
    • 及时清理事件监听器

相关文章:

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

报错&#xff1a;MC1000未知的生成错误Invalid number of sections declared in PE header 报错问题&#xff1a; MC1000未知的生成错误Invalid number of sections declared in PE header 开发环境&#xff1a;vs2022&#xff0c;编译C#工程时报错, 解决办法&#xff1a;重新…...

FPGA实现任意角度视频旋转(二)视频90度/270度无裁剪旋转

本文主要介绍如何基于FPGA实现视频的90度/270度无裁剪旋转&#xff0c;旋转效果示意图如下&#xff1a; 为了实时对比旋转效果&#xff0c;采用分屏显示进行处理&#xff0c;左边代表旋转前的视频在屏幕中的位置&#xff0c;右边代表旋转后的视频在屏幕中的位置。 分屏显示的…...

Linux(Centos 7.6)命令详解:wc

1.命令作用 打印文件的行数、单词数、字节数&#xff0c;如果指定了多个文件&#xff0c;还会打印以上三种数据的总和(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解决

**原因&#xff1a;**CentOS 7 的官方仓库在 2024 年 6 月 30 日之后已经停止维护&#xff0c;不需要再去检查什么网络、DNS等乱七八糟的&#xff0c;因为这玩意都停止维护了&#xff0c;就算其他配置正常也照样不通。 **解决&#xff1a;**将CentOS-Base.repo文件替换成下面的…...

C语言程序设计:算法程序的灵魂

文章目录 C语言程序设计&#xff1a;算法程序的灵魂算法数据结构程序数据结构算法数值运算算法非数值运算算法 简单的算法举例【例2.1】求12345【例2.2】有50个学生&#xff0c;要求输出成绩在80分以上的学生的学号和成绩 简单的算法举例【例2.3】判定2000—2500年中的每一年是…...

openlayer getLayerById 根据id获取layer图层

背景&#xff1a; 在项目中使用getLayerById获取图层&#xff0c;这个getLayerById()方法不是openlayer官方文档自带的&#xff0c;而是自己封装的一个方法&#xff0c;这个封装的方法的思路是&#xff1a;遍历所有的layer&#xff0c;根据唯一标识【可能是id&#xff0c;也可能…...

在 vscode + cmake + GNU 工具链的基础上配置 JLINK

安装 JLINK JLINK 官网链接 下载安装后找到安装路径下的可执行文件 将此路径添加到环境变量的 Path 中。 创建 JFlash 项目 打开 JFlash&#xff0c;选择新建项目 选择单片机型号 在弹出的窗口中搜索单片机 其他参数根据实际情况填写 新建完成&#xff1a; 接下来设置…...

react antd点击table单元格文字下载指定的excel路径

在使用 Ant Design (antd) 的 Table 组件时&#xff0c;如果想点击表格单元格中的文字来触发下载指定路径的 Excel 文件&#xff0c;可以通过以下步骤实现&#xff1a; 1. 确保有一个可供下载的 Excel 文件&#xff1a;需要有一个服务器端点或者一个可以直接访问的 URL&#xf…...

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

使用国内镜像源&#xff1a;由于 Docker 的官方源在国内访问可能不稳定&#xff0c;你可以使用国内的镜像源&#xff0c;如阿里云的镜像源。手动创建 /etc/yum.repos.d/docker-ce.repo 文件&#xff0c;并添加以下内容&#xff1a; [docker-ce-stable] nameDocker CE Stable -…...

Java设计模式 十八 状态模式 (State Pattern)

状态模式 (State Pattern) 状态模式是一种行为型设计模式&#xff0c;它允许对象在其内部状态改变时改变其行为。状态模式让一个对象在其状态改变时&#xff0c;其行为也随之改变&#xff0c;看起来就像是改变了对象的类。通过将状态的变化封装到不同的状态对象中&#xff0c;…...

PyTorch张量操作reshape view permute transpose

1. reshape() 和 view() view和reshape都用于改变张量的shape view是reshape的一个特例&#xff0c;view要求张量在内存中是连续的&#xff0c;否则会抛出错误&#xff0c;view只能用于contiguous的张量 reshape会自动处理contiguous的情况&#xff0c;如果张量是contiguous…...

RabbitMQ5-死信队列

目录 死信的概念 死信的来源 死信实战 死信之TTl 死信之最大长度 死信之消息被拒 死信的概念 死信&#xff0c;顾名思义就是无法被消费的消息&#xff0c;一般来说&#xff0c;producer 将消息投递到 broker 或直接到queue 里了&#xff0c;consumer 从 queue 取出消息进…...

macOS使用LLVM官方发布的tar.xz来安装Clang编译器

之前笔者写过一篇博文ubuntu使用LLVM官方发布的tar.xz来安装Clang编译器介绍了Ubuntu下使用官方发布的tar.xz包来安装Clang编译。官方发布的版本中也有MacOS版本的tar.xz&#xff0c;那MacOS应该也是可以安装的。 笔者2015款MBP笔记本&#xff0c;CPU是intel的&#xff0c;出厂…...

【算法学习】归并排序算法思想的应用—求逆序对数量

Hey&#xff0c;大家好&#xff01;&#x1f44b; 今天我们来聊聊一个有趣的话题——如何在归并排序的基础上&#xff0c;高效解决求逆序对数量的问题。如果你对算法感兴趣&#xff0c;或者正在准备算法面试&#xff0c;这篇文章一定会对你有所帮助&#xff01;&#x1f680; …...

一组开源、免费、Metro风格的 WPF UI 控件库

前言 今天大姚给大家分享一个开源、免费、Metro风格的 WPF UI 控件库&#xff1a;MahApps.Metro。 项目介绍 MahApps.Metro 是一个开源、免费、Metro风格的 WPF UI 控件库&#xff0c;提供了现代化、平滑和美观的控件和样式&#xff0c;帮助开发人员轻松创建具有现代感的 Win…...

Spring Security 应用详解

Spring Security 应用详解 集成SpringBootSpring Boot 介绍创建maven工程spring 容器配置Servlet Context配置安全配置测试 工作原理结构总览认证流程认证流程AuthenticationProviderUserDetailsServicePasswordEncoder 授权流程授权流程授权决策 自定义认证自定义登录页面认证…...

业务对象和对象的区别

"业务对象"和"对象"这两个术语在日常编程和软件工程中经常被使用&#xff0c;但它们之间存在一些区别&#xff0c;主要体现在它们的目的、范围和抽象层次上。 ### 对象&#xff08;Object&#xff09; 1. **定义**&#xff1a; - 对象是面向对象编程&#…...

81,【5】BUUCTF WEB [b01lers2020]Life on Mars

进入靶场 怎莫颠颠的&#xff0c;一下子就想到展博了 先把左边的挨个点一遍 在最后一个有点收获 不过也没其他收获了 这种进去给个正常网页的题目&#xff0c;基本都靠url获取信息了 抓包看看有没有其他信息 竟然没有任何信息 自闭了 看别人的wp去咯 为什么别人抓到的包里…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...