Vue 组件间通信有哪几种方式

Vue 组件间通信是面试常考的知识点之一,这题有点类似于开放题,你回答出越多方法当然越加分,表明你对 Vue 掌握的越熟练。

Vue 组件间通信只要指以下 3 类通信:父子组件通信、隔代组件通信、兄弟组件通信,下面我们分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。

(1)props / $emit 适用 父子组件通信

这种方法是 Vue 组件的基础,相信大部分同学耳闻能详,所以此处就不举例展开介绍。

(2)ref 与 $parent / $children 适用 父子组件通信

  • ref:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例

  • $parent / $children:访问父 / 子实例

(3)EventBus ($emit / $on) 适用于 父子、隔代、兄弟组件通信

这种方法通过一个空的 Vue 实例作为中央事件总线(事件中心),用它来触发事件和监听事件,从而实现任何组件间的通信,包括父子、隔代、兄弟组件。

(4)$attrs/$listeners 适用于 隔代组件通信

  • $attrs:包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 ( class 和 style 除外 ),并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。

  • $listeners:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

(5)provide / inject 适用于 隔代组件通信

祖先组件中通过 provider 来提供变量,然后在子孙组件中通过 inject 来注入变量。provide / inject API 主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系。

(6)Vuex 适用于 父子、隔代、兄弟组件通信

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store(仓库)。“store” 基本上就是一个容器,它包含着你的应用中大部分的状态 ( state )。

  • Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

  • 改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

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

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

相关文章

Upload上传图片,回显图片,编辑图片,限制图片,不显示上传图标,图片放大功能

效果图: 新增、编辑时:限制上传四张,当超过四张隐藏上传图标 图片放大 :效果图 详情:回显时不显示上传图标 页面:template 部分 图片在前端存储,提交时一并给后端 :file-list"repairPlan…

什么是骨传导蓝牙耳机?骨传导耳机原理分析!

骨传导耳机,顾名思义是利用骨传导技术制造而成的一种耳机,也被称之为骨导耳机、骨感耳机、骨传感耳机。 骨传导耳机的传声原理跟传统耳机有所不同,传统耳机通过空气振动将声音传入耳膜,而骨传导耳机是通过人体骨骼将声音直接传递…

c4d怎么建模沙发?

c4d怎么建模沙发?c4d中想要制作一组沙发,该怎么制作三维立体的沙发模型呢?c4d中想要制作一组沙发,该怎么建模沙发呢?下面我们就来看看c4d创建沙发模型的教程。 1、打开软件,点击立方体; 2、修改…

【2023csp-j 第二轮认证 第一题】

apple小苹果 【题目描述】 小Y的桌子上放着n个苹果从左到右排成一列,编号为从1到n。 小苞是小Y的好朋友,每天她都会从中拿走一些苹果。 每天在拿的时候,小苞都是从左侧第1个苹果开始、每隔2个苹果拿走1个苹果。随后小苞会将剩下的苹果按原…

Linux 命令 ifconfig 全面解析!

ifconfig 是 network interfaces configuring 的缩写。 在 Linux 操作系统中,ifconfig 用于显示或配置网络设备的参数信息。 查看网卡信息 $ ifconfig # 显示激活状态(up 状态)的网卡信息 eth0 Link encap:Ethernet HWaddr 00:0c:29:75:8…

vue2、vue3状态管理之vuex、pinia

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、状态管理之vuex1.1 State调用:1.2 Mutation在vuex中定义:在组件中使用: 1.3 Action在vuex中定义:将上面的减…

docker run --help帮助文档

文章目录 基础环境docker run --helpdocker run --help中文翻译 基础环境 环境:ubuntu20.04 x64 使用apt install docker.io安装docker docker版本: rootky:/userdata/testOnebuttonDeploy/shsany_ai/kyai_arm_ubuntu# docker -v Docker version 24.0…

手撕Promise

实现一个promise我个人分为几步 定义状态和值初始化状态和值实现resolve和reject方法来改变状态,这里需要注意报错处理和状态确定后就不可改变和this指向问题定义任务队列保存下需要执行的函数,在状态改变时去执行实现then 执行任务队列,需要…

FPGA-AMBA协议、APB协议、AHB规范、AXI4协议规范概述及它们之间的关系

FPGA-AMBA协议、APB协议、AHB协议、AXI4协议规范概述 笔记记录,AMBA协议、APB协议、AHB规范、AXI4协议规范概述,只是概述描述,具体详细的协议地址传输、数据传输等内容将在下一章节详细说明。 文章目录 FPGA-AMBA协议…

【目标跟踪】解决多目标跟踪遮挡问题

文章目录 前言一、判定遮挡目标二、扩展目标框三、结论 前言 目标跟踪在发生遮挡时,极其容易发生Id Switch。网上许多算法忽视跟踪遮挡问题,同时网上相关资料也很少。博主为了解决跟踪遮挡,翻阅大量论文。分享其中一篇论文。论文链接:https:…

Everything 搜索

正则表达式Regex 首先需要开启 Everything 工具在(字符串)查找时,对正则表达式功能的支持: 需要在【菜单栏】⇒ 【Search】⇒ 勾选【Enable Regex】 查看Everything 支持的语法:

怎么下载landsat 8影像并在ArcGIS Pro中进行波段组合

Landsat 8(前身为Landsat数据连续性任务,或 LDCM)于2013年2月11日由 Atlas-V火箭从加利福尼亚州范登堡空军基地发射升空,这里为大家介绍一下该数据的下载的方法,希望能对你有所帮助。 注册账号 如果之前已经注册过的…

基于采样的自动驾驶规划算法 - PRM,RRT,RRT*,CL-RRT

本文将讲解PRM,RRT,RRT*自动驾驶规划算法原理,不正之处望读者指正 0 前言 机器人运动规划的基本任务:从开始位置到目标位置的运动 (1)如何躲避构型空间出现的障碍物 (2)如何满足机器…

SkyWalking UI 修改发布Nginx

文章目录 SkyWalking UI修改图标修改路由发布到Nginx添加认证修改路由模式vite.config.ts添加baseNginx配置 SkyWalking UI skywalking-booster-ui下载地址 修改图标 替换 logo.svg 修改路由 router - data - index.ts 发布到Nginx 添加认证 # 安装 yum install -y h…

VMware ESXi常用查看RAID和磁盘信息工具及命令汇总

一、Esxcli 使用 Esxcli 命令可获取有关 vSAN 的信息,以及对您的 vSAN 环境进行故障排除。 可用命令如下: 命令描述esxcli vsan network list确认哪些 VMkernel 适配器可用于 vSAN 通信。esxcli vsan storage list列出由 vSAN 声明的存储磁盘。esxcli…

Pikachu靶场 “Http Header”SQL注入

1. 先在 pikachu 打开 Http Header 注入模块,点击提示 查看登录 账号 和 密码,登陆后去 Burp 中找到登陆的 GET请求 2. 设置payload1 :在 User-Agent最后 输入 查看 数据库名 or updatexml(1,concat(0x7e,database()),0) or 查看 用户名…

随机梯度辨识方法

Matlab 利用随机梯度方法进行辨识的举例,可以结合不同情况进行优化处理(例如需要复现文献中结果) Matlab代码如下: clc;clear;close; format short g; M Stochastic gradient method; sigma 0.5; % Noise standard deviati…

asp.net core 教程

asp.net core 教程 写在前面新建项目Get和PostGETPOST MVC-模型控制视图如何通俗理解MVCMVC架构---文件夹详解Connected ServicesPropertieswwwroot依赖项ControllersModelsViews 代码实例 API模型(前后端分离)前端代码后端代码 文件配置优先级优先级顺序…

YOLOv5改进 | 主干篇 | 利用MobileNetV3替换Backbone(轻量化网络结构)

一、本文介绍 本文给大家带来的改进机制是MobileNetV3,其主要改进思想集中在结合硬件感知的网络架构搜索(NAS)和NetAdapt算法,以优化移动设备CPU上的性能。它采用了新颖的架构设计,包括反转残差结构和线性瓶颈层&…

dev express 15.2图表绘制性能问题(dotnet绘图表)

dev express 15.2 绘制曲线 前端代码 <dxc:ChartControl Grid.Row"1"><dxc:XYDiagram2D EnableAxisXNavigation"True"><dxc:LineSeries2D x:Name"series" CrosshairLabelPattern"{}{A} : {V:F2}"/></dxc:XYDi…