vue的 props 与 $emit 以及 provide 与 inject 的 组件之间的传值对比

news2025/3/13 20:54:37

好的，下面是 props 与 $emit 以及 provide 与 inject 的对比：

1. props 与 $emit

  • props：父组件通过 props 向子组件传递数据，子组件接收后不可修改。子组件只能读取 props 传递给它的数据。如果需要修改或更新父组件的状态，子组件必须通过 $emit 发射事件将变化传递回父组件。

  • $emit：子组件通过 $emit 向父组件发送事件通知，通常携带事件的相关数据。父组件通过事件监听器（@event）接收并处理事件，从而更新父组件的状态。

使用场景
  • props 用于父组件向子组件传递数据。
  • $emit 用于子组件向父组件传递事件或更新通知。

2. provide 与 inject

  • provide：父组件使用 provide 向其所有子孙组件提供一个数据源。provide 提供的是一个共享的数据源，所有子孙组件都可以通过 inject 获取到这些数据。provide 并不会创建副本，而是传递引用，所以子组件对数据的修改会直接影响父组件。

  • inject：子组件通过 inject 获取父组件（或祖先组件）通过 provide 提供的数据。通过 inject 获取到的数据通常可以直接修改（因为它是引用类型），不过需要注意可能会影响到父组件的状态。

使用场景
  • provide 和 inject 用于祖先组件与后代组件之间的数据传递。provide 提供数据，inject 接收数据，并且在需要时可以修改这些数据。

对比总结

特性props$emitprovideinject
数据流父组件 → 子组件子组件 → 父组件父组件 → 所有子孙组件子组件 → 获取父组件或祖先组件的数据
数据修改子组件不能直接修改父组件的数据子组件通过 $emit 向父组件通知修改子组件可以直接修改数据子组件可以直接修改数据
用途用于父组件向子组件传递数据用于子组件向父组件发出事件用于祖先组件向后代组件共享数据用于后代组件接收祖先组件共享的数据
作用范围仅限于父子组件之间仅限于父子组件之间祖先组件可以向所有子孙组件提供数据后代组件可以接收祖先组件提供的数据
是否创建新副本会为每个子组件创建数据的副本不涉及数据副本提供的数据是引用类型，不会创建副本获取的是引用类型的数据
数据传递方式单向数据流，父组件传递给子组件子组件通过事件通知父组件数据通过引用共享给所有后代组件子组件通过引用访问祖先组件提供的数据
父子组件关系父组件控制子组件的数据，子组件只读数据子组件通知父组件，父组件处理事件祖先组件与后代组件之间共享数据后代组件通过 inject 获取祖先组件提供的数据

总结：

  • props 与 $emit 是 父子组件 之间常用的通信机制，父组件通过 props 传递数据给子组件，子组件通过 $emit 将事件和数据传递回父组件。
  • provide 与 inject 是 祖先组件与后代组件 之间的通信机制，适用于不直接相邻的组件之间的数据传递。provide 提供共享数据，inject 接收共享数据，且子组件可以修改这些数据。

除了 props 和 $emit、provide 和 inject，Vue 中还有其他几种数据传递和通信方式，特别是适用于不同组件间的交互。以下是一些常见的传值方式：

1. v-model 双向数据绑定

  • 用法：v-model 是 Vue 提供的双向数据绑定的语法糖，主要用于父子组件之间的值传递。通过 v-model，子组件可以绑定父组件传递的值，并且可以修改这个值，父组件会接收到修改后的值。

  • 工作原理：v-model 会在父组件中生成一个绑定的属性（通常是 value），子组件会通过 modelValue（Vue 3 中）或 value（Vue 2 中）接收这个值，并通过 $emit 发射事件更新值。

  • 示例：

    <!-- 父组件 -->
<child-component v-model="message"></child-component>

<!-- 子组件 -->
<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event)">
</template>

    这样，v-model 可以实现父子组件的双向数据绑定。

2. 事件总线 (Event Bus)

  • 用法：事件总线是通过 Vue 实例来实现组件之间的通信，适用于多个组件之间没有直接关系时的通信。父子组件关系无法满足的情况时，可以使用事件总线。

  • 工作原理：通过 new Vue() 创建一个中央事件总线，将事件注册在事件总线上，其他组件可以通过 $on 监听事件，通过 $emit 触发事件。

  • 示例：

    // 在事件总线文件中创建一个 Vue 实例
export const EventBus = new Vue();

// 组件1：触发事件
EventBus.$emit('eventName', data);

// 组件2：监听事件
EventBus.$on('eventName', data => {
  // 处理数据
});

  • 注意：事件总线通常不推荐用于大型应用，因为它可能导致难以追踪的状态和事件，尤其是当项目变大时。

3. Vuex 状态管理

  • 用法：Vuex 是一个专为 Vue.js 应用程序开发的状态管理库，用于在不同组件之间共享状态。它是适用于跨组件、跨页面、跨模块的数据共享方案。

  • 工作原理：Vuex 使用一个中央的 store 来存储数据，组件通过 store 访问状态并提交更改，Vuex 会自动更新相关组件的视图。

  • 示例：

    // Vuex store 配置
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

// 组件访问 Vuex 状态
this.$store.state.count;
this.$store.commit('increment');

  • 适用场景：适用于复杂的状态管理，特别是当需要跨组件或跨页面共享和更新状态时，Vuex 是一个非常好的选择。

4. Scoped Slots (作用域插槽)

  • 用法：作用域插槽允许子组件向父组件暴露数据，父组件可以通过插槽的作用域来访问这些数据。它是通过插槽和插槽内容传递数据的一种方式。

  • 工作原理：通过作用域插槽，父组件可以传递函数给子组件，子组件通过插槽将数据传递给父组件使用。

  • 示例：

    <!-- 父组件 -->
<child-component>
  <template #default="{ item }">
    <p>{{ item.name }}</p>
  </template>
</child-component>

<!-- 子组件 -->
<template>
  <slot :item="item"></slot>
</template>

  • 适用场景：当你想让父组件能够接收到子组件的数据并动态渲染子组件的内容时，可以使用作用域插槽。

5. Local Storage / Session Storage

  • 用法：localStorage 和 sessionStorage 是浏览器提供的 Web 存储机制，它们可以存储数据并在不同的页面或组件之间共享。localStorage 是持久化存储，sessionStorage 在会话结束时清除。

  • 工作原理：你可以通过 localStorage.setItem 或 sessionStorage.setItem 将数据存储到浏览器的本地存储中，然后在其他页面或组件中读取该数据。

  • 示例：

    // 存储数据
localStorage.setItem('key', 'value');

// 获取数据
const value = localStorage.getItem('key');

  • 适用场景：适用于需要在多个页面或应用程序会话中保持数据的场景，尤其是需要跨页面共享数据时。

6. Cookie

  • 用法：Cookie 是浏览器用于存储少量数据的机制，通常用于保存会话信息、用户认证信息等。

  • 工作原理：通过 document.cookie 设置和读取 Cookie 数据，浏览器会在后续请求时自动带上 Cookie 数据。

  • 示例：

    // 设置 Cookie
document.cookie = "username=John Doe";

// 获取 Cookie
const cookies = document.cookie;

  • 适用场景：适用于跨页面、跨会话的简单数据存储，特别是用户认证和会话信息。

总结对比

传值方式适用场景数据流优点缺点
props 与 $emit父子组件之间的数据传递与事件处理父 → 子，子 → 父简单易用，直观，适用于父子组件间数据交互只适用于父子组件关系
provide 与 inject祖先组件与后代组件之间的数据传递父 → 后代，子 → 祖先适用于非直系组件间共享数据可能引发数据依赖问题
v-model双向绑定父子组件间的数据父 ↔ 子自动实现双向绑定需要约定规范，可能引起混乱
EventBus跨多个组件间的通信，尤其是非直接关系的组件组件 → 组件灵活，适用于多个组件之间的事件通信难以追踪和管理，容易引发不必要的依赖
Vuex跨多个组件、页面间共享复杂的状态管理全局状态管理强大的状态管理功能，适合大规模应用配置和维护比较复杂
Scoped Slots父组件控制子组件的内容，同时接收子组件暴露的数据父 ↔ 子灵活的内容插入机制使用场景较为特定
LocalStorage/SessionStorage跨页面数据共享，数据持久化浏览器存储，跨页面数据持久化，跨页面可访问只适用于简单数据，不适合复杂状态
Cookie跨会话共享数据，通常用于存储认证信息跨会话，跨页面浏览器自动管理，跨会话持久化存储容量小，安全性较低

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2314488.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

用python批量生成文件夹

用python批量生成文件夹

问题描述 当批量生成文件夹时&#xff0c;手动右键创建文件夹是一个繁琐的过程&#xff0c;尤其是文件夹的命名过程。假设从3月10日到3月19日&#xff0c;每天要为某个日常工作创建一个名为2025031x的文件夹&#xff0c;手动创建文件夹并命名费时费力。 百度给出了以下四种方法…
阅读更多...
【MySQL】基本操作 —— DDL

【MySQL】基本操作 —— DDL

目录 DDLDDL 常用操作对数据库的常用操作查看所有数据库创建数据库切换、显示当前数据库删除数据库修改数据库编码 对表的常用操作创建表数据类型数值类型日期和时间类型字符串类型 查看当前数据库所有表查看指定表的创建语句查看指定表结构删除表 对表结构的常用操作给表添加字…
阅读更多...
游戏引擎学习第152天

游戏引擎学习第152天

仓库:https://gitee.com/mrxiao_com/2d_game_3 回顾昨天的内容 这个节目展示了我们如何从零开始制作一款完整的游戏。我们不使用任何游戏引擎或库&#xff0c;而是从头开始创建一款游戏&#xff0c;整个开发过程都会呈现给大家。你将能够看到每一行代码的编写&#xff0c;了解…
阅读更多...
考研数学非数竞赛复习之Stolz定理求解数列极限

考研数学非数竞赛复习之Stolz定理求解数列极限

在非数类大学生数学竞赛中&#xff0c;Stolz定理作为一种强大的工具&#xff0c;经常被用来解决和式数列极限的问题&#xff0c;也被誉为离散版的’洛必达’方法&#xff0c;它提供了一种简洁而有效的方法&#xff0c;使得原本复杂繁琐的极限计算过程变得直观明了。本文&#x…
阅读更多...
故障诊断——neo4j入门

故障诊断——neo4j入门

文章目录 neo4jQuickStartDemo neo4j QuickStart 详情可见博客&#xff1a;https://www.cnblogs.com/nhdlb/p/18703804&#xff0c;使用docker拉取最近的一个版本进行创建 docker run -it -d -p 7474:7474 -p 7687:7687 \ -v /disk5/neo4j_docker/data:/data \ -v /disk5/ne…
阅读更多...
【JavaWeb】快速入门——HTMLCSS

【JavaWeb】快速入门——HTMLCSS

文章目录 一、 HTML简介1、HTML概念2、HTML文件结构3、可视化网页结构 二、 HTML标签语法1、标题标签2、段落标签3、超链接4、换行5、无序列表6、路径7、图片8、块1 盒子模型2 布局标签 三、 使用HTML表格展示数据1、定义表格2、合并单元格横向合并纵向合并 四、 使用HTML表单收…
阅读更多...
若依框架-给sys_user表添加新字段并获取当前登录用户的该字段值

若依框架-给sys_user表添加新字段并获取当前登录用户的该字段值

目录 添加字段 修改SysUser类 修改SysUserMapper.xml 修改user.js 前端获取字段值 添加字段 若依框架的sys_user表是没有age字段的&#xff0c;但由于业务需求&#xff0c;我需要新添加一个age字段&#xff1a; 修改SysUser类 添加age字段后&#xff0c;要在SysUser类 …
阅读更多...
前端监测窗口尺寸和元素尺寸变化的方法

前端监测窗口尺寸和元素尺寸变化的方法

前端监测窗口尺寸变化和元素尺寸变化的方法 window.resize 简介 window.resize事件是浏览器提供的一种事件&#xff0c;用于监听窗口大小的改变。这意味着当用户调整浏览器窗口大小时&#xff0c;相关的JavaScript代码将被触发执行。这为开发者提供了一种机制&#xff0c;可…
阅读更多...
ubuntu 部署deepseek

ubuntu 部署deepseek

更新 apt update 升级 apt upgrade 格式化硬盘 mkfs.ext4 /dev/sdb 安装nginx 查看端口 一、安装Ollama Ollama是一个开源的大型语言模型&#xff08;LLM&#xff09;推理服务器&#xff0c;为用户提供了灵活、安全和高性能的语言模型推理解决方案。 ollama/docs/linux.m…
阅读更多...
MySQL库和表的操作详解：从创建库到表的管理全面指南

MySQL库和表的操作详解：从创建库到表的管理全面指南

目录 一、MySQL库的操作详解 〇、登录MySQL 一、数据库的创建与字符集设置 1. 创建数据库的语法 2. 创建数据库示例 查看创建出来的文件: bash下查看MySQL创建的文件 二、字符集与校验规则 1. 查看系统默认设置 2. 查看支持的字符集与校验规则 3. 校验规则对查询的影响…
阅读更多...
PyTorch 系列教程：使用CNN实现图像分类

PyTorch 系列教程：使用CNN实现图像分类

图像分类是计算机视觉领域的一项基本任务&#xff0c;也是深度学习技术的一个常见应用。近年来&#xff0c;卷积神经网络&#xff08;cnn&#xff09;和PyTorch库的结合由于其易用性和鲁棒性已经成为执行图像分类的流行选择。 理解卷积神经网络&#xff08;cnn&#xff09; 卷…
阅读更多...
Java 大视界 -- Java 大数据中的数据可视化大屏设计与开发实战（127）

Java 大视界 -- Java 大数据中的数据可视化大屏设计与开发实战（127）

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…
阅读更多...
「Unity3D」UGUI将元素固定在，距离屏幕边缘的某个比例，以及保持元素自身比例

「Unity3D」UGUI将元素固定在，距离屏幕边缘的某个比例，以及保持元素自身比例

在不同分辨率的屏幕下&#xff0c;UI元素按照自身像素大小&#xff0c;会发生位置与比例的变化&#xff0c;本文仅利用锚点&#xff08;Anchors&#xff09;使用&#xff0c;来实现UI元素&#xff0c;固定在某个比例距离的屏幕边缘。 首先&#xff0c;将元素的锚点设置为中心&…
阅读更多...
Deep research深度研究：ChatGPT/ Gemini/ Perplexity/ Grok哪家最强？（实测对比分析）

Deep research深度研究：ChatGPT/ Gemini/ Perplexity/ Grok哪家最强？（实测对比分析）

目前推出深度研究和深度检索的AI大模型有四家&#xff1a; OpenAI和Gemini 的deep research&#xff0c;以及Perplexity 和Grok的deep search&#xff0c;都能生成带参考文献引用的主题报告。 致力于“几分钟之内生成一份完整的主题调研报告&#xff0c;解决人力几小时甚至几天…
阅读更多...
关于sqlalchemy的ORM的使用

关于sqlalchemy的ORM的使用

关于sqlalchemy的ORM的使用 二、创建表三、使用数据表、查询记录三、批量插入数据四、关于with...as...:的使用 二、创建表 使用Mapped来映射字段 from sqlalchemy.ext.declarative import declarative_base from sqlalchemy.orm import sessionmaker,Mapped,mapped_columnBa…
阅读更多...
【leetcode hot 100 148】排序序列

【leetcode hot 100 148】排序序列

解法一&#xff1a;&#xff08;双重循环&#xff09;第一个循环head&#xff0c;逐步将head的node加入有序列表&#xff1b;第二个循环在有序列表中找到合适的位置&#xff0c;插入node。 /*** Definition for singly-linked list.* public class ListNode {* int val;* …
阅读更多...
【Linux】在VMWare中安装Ubuntu操作系统(2025最新_Ubuntu 24.04.2)#VMware安装Ubuntu实战分享#

【Linux】在VMWare中安装Ubuntu操作系统(2025最新_Ubuntu 24.04.2)#VMware安装Ubuntu实战分享#

今天田辛老师为大家带来一篇关于在VMWare虚拟机上安装Ubuntu系统的详细教程。无论是学习、开发还是测试&#xff0c;虚拟机都是一个非常实用的工具&#xff0c;它允许我们在同一台物理机上运行多个操作系统。Ubuntu作为一款开源、免费且用户友好的Linux发行版&#xff0c;深受广…
阅读更多...
AutoGen学习笔记系列（十三）Advanced - Logging

AutoGen学习笔记系列（十三）Advanced - Logging

这篇文章瞄的是AutoGen官方教学文档 Advanced 章节中的 Logging 篇章&#xff0c;介绍了怎样在使用过程中添加日志信息&#xff0c;其实就是使用了python自带的日志库 logging。 官网链接&#xff1a;https://microsoft.github.io/autogen/stable/user-guide/agentchat-user-g…
阅读更多...
scrcpy pc机远程 无线 控制android app 查看调试log

scrcpy pc机远程 无线 控制android app 查看调试log

背景&#xff1a; 公司的安卓机&#xff0c;是那种大屏幕的连接usb外设的。不好挪动&#xff0c;占地方&#xff0c;不能直接连接pc机上的android stduio来调试。 所以从网上找了一个python adb.exe控制器&#xff0c;可以局域网内远程控制开发的app,并在android stduio上看…
阅读更多...
UE5.5 Niagara发射器更新属性

UE5.5 Niagara发射器更新属性

发射器属性 在 Niagara 里&#xff0c;Emitter 负责控制粒子生成的规则和行为。不同的 Emitter 属性决定了如何发射粒子、粒子如何模拟、计算方式等。 发射器 本地空间&#xff08;Local Space&#xff09; 控制粒子是否跟随发射器&#xff08;Emitter&#xff09;移动。 ✅…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023