vue组件间通信

Vue组件之间通信方式有哪些

一、父子组件通讯

1、props,emit

父组件可以通过props给子组件传递变量。子组件可以通过emit派发自定义事件,使父组件可以获得事件函数传递过来的形参。

2、$parent、$children、ref

父组件可以通过 c h i l d r e n 获取子组件,从而获取子组件的属性和方法。 v u e 3 已不支持 children获取子组件,从而获取子组件的属性和方法。vue3已不支持 children获取子组件,从而获取子组件的属性和方法。vue3已不支持children,但是父组件还可以通过 r e f s 来获取子组件实例来获取子组件的属性和方法。而子组件也可以通过 refs来获取子组件实例来获取子组件的属性和方法。而子组件也可以通过 refs来获取子组件实例来获取子组件的属性和方法。而子组件也可以通过parent来获取父组件的属性和方法。

二、兄弟组件通讯

1、$parent、$root

通过父组件桥接传值通讯。

2、eventbus

vue2可以通过构造一个vue实例对象,通过调用vue.$emit派发事件,$on监听事件来实现兄弟组件的通讯,$off解除事件绑定。但是在vue3中废弃了$on方法,推荐使用第三方库mitt

3、vuex

三、跨层级组件通讯

1、provide、inject

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。如果你熟悉 React,这与 React 的上下文特性很相似。

provide

  • 一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

inject

  • 一个字符串数组
  • 一个对象

2、$attrs

包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (classstyle 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (classstyle 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

3、eventbus

4、vuex

四、另外

1、slot

2、mixin

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

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

相关文章

imgaug库图像增强指南(32):塑造【雪景】效果的视觉魔法

引言 在深度学习和计算机视觉的世界里,数据是模型训练的基石,其质量与数量直接影响着模型的性能。然而,获取大量高质量的标注数据往往需要耗费大量的时间和资源。正因如此,数据增强技术应运而生,成为了解决这一问题的…

我的项目管理工具TaskSaas

这次使用的技术是Python的Django框架,以及Django框架自带的前端模版语法. Open-TaskSaas: 项目、学习管理工具 项目已经开源,但我在此基础上已经开始更新Vue3Springboot版本,也希望喜欢开源和学习的小伙伴共同加入进来! 基本的样式,操作,都从线上环境可以看得到了! 首页 测…

Django(九)

1. 用户登录-Cookie和Session 什么是cookie和session? 发送HTTP请求或者HTTPS请求(无状态&短连接) http://127.0.0.1:8000/admin/list/ https://127.0.0.1:8000/admin/list/http无状态短连接:一次请求响应之后断开连接,再发请求重新连…

PCB导线阻抗概念

1. 计算公式 https://baijiahao.baidu.com/s?id1750340479004609055&wfrspider&forpc Z087/SQRT(εr1.41)ln[(5.98h)/(0.8wt)] 常规来说阻抗与介电常数成反比,与介质层厚度成正比,与线宽成反比,与铜厚成反比。 Z0:印刷导线的特性阻抗 εr:绝缘…

RK3568笔记十:Zlmediakit交叉编译

若该文为原创文章,转载请注明原文出处。 编译Zlmediakit的主要目的是想实现在RK3568拉取多路RTPS流,并通过MPP硬解码,DRM显示出来。为了实现拉取多路流选择了Zlmediakit,使用FFMEPG也可以,在RV1126上已经验证了可行性。 一、环境…

CPU和GPU的工作原理及区别

CPU(Central Processing Unit)和GPU(Graphics Processing Unit)是计算机系统中的两种主要处理器类型,它们在工作原理和用途上有一些显著的区别。 CPU(中央处理器) 工作原理: 通用…

CEF框架中的一些宏定义(一):CHECK DCHECK

文章目录 CHECK & DCHECKDCHECK_IS_ON 日志相关COMPACT_GOOGLE_LOG_FATALLogMessageLOG_STREAM(FATAL)LAZY_STREAMLogMessageVoidify 在CEF框架中,有很多的宏定义,有必要拿出来说一说,在阅读源码的时候更好的理解。 CHECK & DCHECK …

PyTorch深度学习实战(31)——生成对抗网络(Generative Adversarial Network, GAN)

PyTorch深度学习实战(31)——生成对抗网络 0. 前言1. GAN2. GAN 模型分析3. 利用 GAN 模型生成手写数字小结系列链接 0. 前言 生成对抗网络 (Generative Adversarial Networks, GAN) 是一种由两个相互竞争的神经网络组成的深度学习模型,它由…

Flask框架小程序后端分离开发学习笔记《3》客户端向服务器端发送请求

Flask框架小程序后端分离开发学习笔记《3》客户端向服务器端发送请求 Flask是使用python的后端,由于小程序需要后端开发,遂学习一下后端开发。 一、为什么请求数据需要先编码 #构造一个HTTP请求 http_request GET / HTTP/1.1\r\nhost:{}\r\n\r\n.for…

大语言模型系列-ELMo

文章目录 前言一、ELMo的网络结构和流程二、ELMo的创新点总结 前言 在前文大语言模型系列-word2vec已经提到word2vec的缺点: 为每个词汇表中每个分词静态生成一个对应的词向量表示,没有考虑到语境,因此无法无法处理多义词 ps:先…

Python Web 开发之 Flask 入门实践

导语:Flask 是一个轻量级的 Python Web 框架,广受开发者喜爱。本文将带领大家了解 Flask 的基本概念、搭建一个简单的 Web 项目以及如何进一步扩展功能。 一、Flask 简介 Flask 是一个基于 Werkzeug 和 Jinja2 的微型 Web 框架,它的特点是轻…

JAVA RPC Thrift基操实现与微服务间调用

一、Thrift 基操实现 1.1 thrift文件 namespace java com.zn.opit.thrift.helloworldservice HelloWorldService {string sayHello(1:string username) }1.2 执行命令生成Java文件 thrift -r --gen java helloworld.thrift生成代码HelloWorldService接口如下 /*** Autogene…

MBR扇区修复和GRUB引导修复实验

修复MBR扇区 步骤一:在进行实验之前我们需要新加一块磁盘,并对新加磁盘进行分区处理,用来备份sda磁盘的MBR及分区表信息。(注:在实验中可以不像我如此这么繁琐,一个主分区,并格式化挂载即可&am…

Android 通过adb命令查看应用流量

一. 获取应用pid号 通过adb shell ps | grep 包名 来获取app的 pid号 二. 查看应用流量情况 使用adb shell cat /proc/#pid#/net/dev 命令 来获取流量数据 备注: Recevice: 表示收包 Transmit: 表示发包 bytes: 表示收发的字节数 packets: 表示收发正确的包量…

【CompletableFuture任务编排】游戏服务器线程模型及其线程之间的交互(以排行榜线程和玩家线程的交互为例子)

需求: 1.我们希望玩家的业务在玩家线程执行,无需回调,因此是多线程处理。 2.匹配线程负责匹配逻辑,是单独一个线程。 3.排行榜线程负责玩家的上榜等。 4.从排行榜线程获取到排行榜列表后,需要给玩家发奖修改玩家数…

【GitHub项目推荐--不错的 C 开源项目】【转载】

大学时接触的第一门语言就是 C语言,虽然距 C语言创立已过了40多年,但其经典性和可移植性任然是当今众多高级语言中不可忽视的,想要学好其他的高级语言,最好是先从掌握 C语言入手。 今天老逛盘点 GitHub 上不错的 C语言 开源项目&…

【代码随想录11】239. 滑动窗口最大值 347. 前 K 个高频元素

目录 239. 滑动窗口最大值题目描述做题思路参考代码 347. 前 K 个高频元素题目描述参考代码 239. 滑动窗口最大值 题目描述 给你一个整数数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每…

详解C语言中`||`的短路机制

在C语言中,逻辑或运算符(||)是一种常用的逻辑运算符,用于组合多个条件表达式。与其他编程语言一样,C语言中的逻辑或运算符具有短路机制,这是一种非常重要的概念,本文将深入解释C语言中的||短路机…

sportplay项目

1.编写userMapping.xml时报错, Error querying database. Cause: java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘‘easyuser’ W…

MSVS C# Matlab的混合编程系列2 - 构建一个复杂(含多个M文件)的动态库:

前言: 本节我们尝试将一个有很多函数和文件的Matlab算法文件集成到C#的项目里面。 本文缩语: MT = Matlab 问题提出: 1 我们有一个比较复杂的Matlab文件: 这个MATLAB的算法,写了很多的算法函数在其他的M文件里面,这样,前面博客的方法就不够用了。会报错: 解决办法如下…