【Vue】 组件通信方式

VUE中实现通信的⽅式:

  1. props:- 若 父传子:属性值是非函数。- 若 子传父:属性值是函数
  2. emit
  3. v-model
  4. refs- $refs:父→子。$parent:子→父。
  5. provide/inject:祖孙组件直接通信,在祖先组件中通过provide配置向后代组件提供数据,在后代组件中通过inject配置来声明接收数据
  6. eventBus
  7. vuex/pinia(状态管理⼯具)
  8. mitt
    常⻅的是上⾯的这⼏种,少⻅的其实还可以算上插槽 slot, 混⼊,路由携带参数,localStorage, $parent /$children

1.props
常常使⽤在⽗组件传递給⼦组件通信的过程中,⾸先在⼦组件中使⽤ props,来接收对应的属性,⽽在⽗组件中使⽤⼦组件的地⽅,添加上⾯定义的属性。
2. emit
这个就和上⾯的相反,是使⽤在⼦组件给⽗组件传递值的中。⼦组件中声明对应的事件,当⼦组件触发事件,就会通过this.$emit(‘事件’ , ‘数据’)传递到,⽽在⽗组件中使⽤⼦组件的地⽅,添加上⾯定义的事件,这个可以获取⼦组件传来的值。
3. provide/inject
这对组合往往使⽤在层级⽐较深的时候,⽐如A组件下可能还有 B组件 ,B组件下有C组件…E组件.⽽使⽤这对API,就能⽆论层级有多深都能获取到
4. eventBus
也就是事件总线,简单粗暴,可以到处⻜。可以不管你是不是⽗⼦关系,通过新建⼀个Vue事件bus对象,然后通过 bus.emit 触发事件,bus.on 监听触发的事件。但不建议乱⽤,不好维护。
5. vuex
对于⼤型的项⽬来说往往是很必要的,尤其单⻚⾯应⽤,很多⻚⾯嵌套⻚⾯,关系很多。⽽使⽤ VUEX 就能便捷的统⼀管理。
总结
常⻅的组件通信⽅式有通过 props / emit / provide 和 inject / eventBus / vuex 等,⼀般根据不同的场景来决定使⽤的⽅式。⽐如⽗⼦组件通信使⽤ props ,反过来使⽤ emit 。⽽当层级很多的时候使⽤ provide ,全局的状态管理使⽤ vuex等。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024年下半年系统架构师案例预测

2024年上半年系统架构师案例考试题目 第一道大题: 1小问:微服务的概念 2小问:质量属性效用树 3小问:质量评估6要素 第二道题:UML(时序图和通信图) 1.时序图概念(消息的类型有什…

【Android】ConstrainLayout约束布局基本操作

文章目录 介绍约束条件添加方式外边距设置删除方式 添加约束条件父级位置对齐方式基线对齐引导线约束屏障约束 约束偏差使用链控制线性组 介绍 约束布局ConstraintLayout是 Android Studio 2.3 起创建布局后的默认布局 主要是为了解决布局多层嵌套问题,以灵活的方式…

抖音/腾讯/百度ocpm深度回传如何操作?广告投放双出价的投放技巧?

要实现抖音、腾讯和百度的OCPM(Optimized Cost Per Mille)深度回传,可以通过借助第三方平台,例如(转化宝)实现广告数据精准回传,如此之外,在广告投放过程中还需要注重这些方面。 转化…

ros笔记02--从零体验ros2中的服务通信方式

ros笔记02--从零体验ros2中的服务通信方式 介绍创建步骤注意事项说明 介绍 在ROS 2中,服务指的是远程过程调用,client调用server,server节点收到数据后计算出结果并返回给client. 服务通常期望能快速返回,因此不应当用于处理长时…

深度学习落地实战:大模型生成图片

前言 大家好,我是机长 本专栏将持续收集整理市场上深度学习的相关项目,旨在为准备从事深度学习工作或相关科研活动的伙伴,储备、提升更多的实际开发经验,每个项目实例都可作为实际开发项目写入简历,且都附带完整的代…

代理伺服器分類詳解

代理伺服器的主要分類 代理伺服器可以根據不同的標準進行分類。以下是幾種常見的分類方式: 按協議分類按匿名性分類按使用場景分類 1. 按協議分類 根據支持的協議類型,代理伺服器可以分為以下幾類: HTTP代理:專門用於處理HTT…

TypeScript 教程(十):项目配置、代码质量与前端框架集成

目录 前言回顾类型声明文件与异步编程1. tsconfig.json 高级配置a. 基本配置b. 高级配置选项 2. 使用 Webpack 构建 TypeScript 项目a. 安装依赖b. 配置 Webpack 3. 使用 Babel 编译 TypeScripta. 安装依赖b. 配置 Babelc. 配置 Webpack 使用 Babel 4. 使用 ESLint 和 TSLinta.…

复杂网络的任意子节点的网络最短距离

复杂网络的任意子节点的网络最短距离 题目要求介绍 本文算法测试用的数据集为空手道俱乐部,其中空手道俱乐部的数据集可通过这个链接进行下载•http://vlado.fmf.uni-lj.si/pub/networks/data/Ucinet/UciData.htm#zachary 摘要 本文旨在解决复杂网络中任意子节点…

Godot学习笔记2——GDScript变量与函数

目录 一、代码编写界面 二、变量 三、函数 四、变量的类型 Godot使用的编程语言是GDS,语法上与python有些类似。 一、代码编写界面 在新建的Godot项目中,点击“创建根节点”中的“其他节点”,选择“Node”。 点击场景界面右上角的绿色…

Spark SQL----GROUP BY子句

Spark SQL----GROUP BY子句 一、描述二、语法三、参数四、例子 一、描述 GROUP BY子句用于根据一组指定的分组表达式对行进行分组,并根据一个或多个指定的聚合函数计算行组上的聚合。Spark还支持高级聚合,通过GROUPING SETS、CUBE、ROLLUP子句对同一输入…

文字溢出隐藏及鼠标悬停显示效果

在本文中&#xff0c;我们将学习如何使用 CSS 和 JavaScript 实现一个简单的文字溢出隐藏效果&#xff0c;当鼠标悬停在文本上时显示完整内容。 创建 HTML 页面结构 首先&#xff0c;我们需要创建一个包含文本内容的 HTML 页面。 <!DOCTYPE html> <html lang"e…

前端Vue组件化实践:自定义发送短信验证码弹框组件

在前端开发中&#xff0c;随着业务逻辑的日益复杂和交互需求的不断增长&#xff0c;传统的整体式开发方式逐渐暴露出效率低下、维护困难等问题。为了解决这些问题&#xff0c;组件化开发成为了一种流行的解决方案。通过组件化&#xff0c;我们可以将复杂的系统拆分成多个独立的…

LeetCode 860柠檬水找零(贪心算法)/406根据身高重建队列(贪心算法)

1. 柠檬水找零 思路分析 只需要维护三种金额的数量&#xff0c;5&#xff0c;10和20。 有如下三种情况&#xff1a; 情况一&#xff1a;账单是5&#xff0c;直接收下。情况二&#xff1a;账单是10&#xff0c;消耗一个5&#xff0c;增加一个10情况三&#xff1a;账单是20&am…

使用Java -jar运行就jar包时报异常:org.yaml.snakeyaml.error.YAMLException异常

Java运行就 .jar包时出现的 YAMLException 异常 我在本地环境测试时&#xff0c;使用 java -jar 命令运行 Java 可执行 .jar 包时&#xff0c;遇到了 org.yaml.snakeyaml.error.YAMLException: java.nio.charset.MalformedInputException: Input length 1 异常&#xff1b;这…

关于集成网络变压器的RJ45网口

集成网络变压器的RJ45网口是一种将网络变压器与RJ45接口集成在一起的网络连接解决方案。这种集成设计具有多项优势&#xff0c;使其在现代网络设备中得到广泛应用。 优势与特点 1. **空间节省**&#xff1a;集成设计减少了组件数量和连接线缆长度&#xff0c;有助于节省设备内…

掌控视界:WebKit与CSS视口单位的卓越支持

掌控视界&#xff1a;WebKit与CSS视口单位的卓越支持 在响应式网页设计中&#xff0c;CSS视口单位&#xff08;Viewport Units&#xff09;发挥着至关重要的作用。它们允许开发者根据视口&#xff08;Viewport&#xff09;的大小来设置元素的尺寸和位置&#xff0c;从而实现在…

激光打印机原理学习

文章目录 参考资料印刷四分色模式激光打印机的工作原理 参考资料 全网最清晰的打印机工作原理 印刷四分色模式 四分色&#xff08;Quadtone&#xff09;印刷是一种特殊的印刷技术&#xff0c;它使用四种不同的颜色通道来再现彩色图像。这四种标准颜色是&#xff1a;C青色&am…

《管理表格系统》开发心得

浅浅记录一下自己开发两个月的心得&#xff0c;毕竟初入职场 一、写一个自己的脚手架【仅后端】 1.springboot版 2.springcloud版 二、注意写WBS 1要件定义企划构想要求定义要件定义&#xff08;总结功能需求、前端样式需求、非功能性需求、开发环境、部署需求、可行性调查&…

云计算的三种服务模式

云计算的三种主要服务模式分别是基础设施即服务&#xff08;IaaS&#xff09;、平台即服务&#xff08;PaaS&#xff09;和软件即服务&#xff08;SaaS&#xff09;。每种服务模式都提供不同级别的抽象和管理&#xff0c;满足不同的需求和用例。以下是对这三种服务模式的详细介…

Linux云计算 |【第一阶段】ENGINEER-DAY5

主要内容&#xff1a; SELinux、系统故障修复、HTTPD/FTP服务搭建、防火墙策略管理、服务管理 一、SELinux安全制度 SELinux&#xff08;Security-Enhanced Linux&#xff09;&#xff0c;美国NSA国家安全局主导开发&#xff0c;一套增强Linux系统安全的强制访问控制体系&…