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

Vue中常见的几种组件间通信方法

1.props(父传子)

父组件Parent.vue

<template><child :msg="message"></child>
</template>

父组件通过:val="value"的形式定义要传给子组件的值value绑定到val上
子组件Child.vue

export default {//写法一 用数组接收props:['msg'], //写法二 用对象接收,可以绑定接收的数据类型、设置默认值、验证等props:{msg:{type:string,default:"这是默认值"}},  created(){console.log(this.msg)}
}

子组件通过props的方法接收父组件绑定的val

2.$emit(子传父)

父组件Parent.vue

<template><p>{{num}}</p><child @getVal="getvalue()"></child>
</template>
<script>
export default { components:{child},data(){return{num=''}},methods:{getvalue(val){this.num = val}}
}
</script>

子组件Child.vue

export default { data(){return{val=1}},methods:{sendval(){this.$emit("getVal",this.val)}}
}

3.EventBus事件总线(兄弟组件间传值)

创建事件中心管理组件之间的通信

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

兄弟A通过 $emit 进行派发传值,兄弟B通过 $on 接收A的值

4、依赖注入(provide / inject)

这种方式就是vue中依赖注入,该方法用于 父子组件之间 的通信。当然这里所说的父子不一定是真正的父子,也可以是祖孙组件,在层数很深的情况下,可以使用这种方式来进行传值。就不用一层一层的传递数据了。
provide和inject是vue提供的两个钩子,和data、methods是同级的。并且provide的书写形式和data一样。
provide 钩子用来发送数据或方法,inject钩子用来接收数据或方法

provide() { return {     num: this.num  };
}
inject: ['num']

注意: 依赖注入所提供的属性是非响应式的。

5、$parent / $children

使用$parent可以让组件访问父组件的实例(访问的是上一级父组件的属性和方法)。
使用 $children 可以让组件访问子组件的实例,但是, $children 并不能保证顺序,并且访问的数据也不是响应式的。

子组件:

<template><div><span>{{message}}</span><p>获取父组件的值为:  {{parentVal}}</p></div>
</template><script>
export default {data() {return {message: 'Vue'}},computed:{parentVal(){return this.$parent.msg;}}
}
</script>

父组件

<template><div class="hello_world"><div>{{msg}}</div><child></child><button @click="change">点击改变子组件值</button></div>
</template><script>
import child from './child.vue'
export default {components: { child },data() {return {msg: 'Welcome'}},methods: {change() {// 获取到子组件this.$children[0].message = 'JavaScript'}}
}
</script>

在上面的代码中,子组件获取到了父组件的parentVal值,父组件改变了子组件中message的值。
1.通过 $parent 访问到的是上一级父组件的实例,可以使用 $root 来访问根组件的实例
2.在组件中使用$children拿到的是所有的子组件的实例,它是一个数组,并且是无序的
3.在根组件 #app 上拿 $parent 得到的是 new Vue()的实例,在这实例上再拿 $parent 得到的是undefined,而在最底层的子组件拿 $children 是个空数组
4.$children 的值是数组,而 $parent是个对象

6、$root

将数据data挂载在vue实例上,子组件通过this.$root.xxx 可以访问

7. 跨代通信$attrs $listeners

相关文章:

Vue中常见的几种组件间通信方法

1.props&#xff08;父传子&#xff09; 父组件Parent.vue <template><child :msg"message"></child> </template>父组件通过:val"value"的形式定义要传给子组件的值value绑定到val上 子组件Child.vue export default {//写法一…...

Outcome VS. Output:研发效能提升中,谁会更胜一筹?

2007 年&#xff0c;网景通信公司&#xff08;Netscape&#xff09;的联合创始人 Marc Andreessen 在博客 The Pmarca Guide to Startups 中提出 「Product/Market Fit」 &#xff0c;他写道&#xff0c; 「这意味着在一个良好的市场中&#xff0c;拥有能够满足该市场的产品。」…...

ptp4l与phc2sys进行系统时钟同步

linuxptp用于时钟同步。安装采用apt install linuxptp主要包含2个程序&#xff0c;ptp4l 进行时钟同步&#xff0c;实时网卡时钟与远端的时钟同步&#xff0c;支持1588 和 802.1AS 两种协议phc2sys 将网卡上的时钟同步到操作系统&#xff0c;或者反之命令demo:某主机P通过eth2连…...

使用注解JSON序列化

JsonSerialize(using ToStringSerializer.class) 将返回数据转成String序列化 JsonFormat(pattern "yyyy-MM-dd hh:mm",timezone"GMT8") 将日期数据转换成特定格式 使用JsonSerialize自定义注解接口 定义接口 import java.lang.annotation.ElementTyp…...

kubernetes教程 --Pod生命周期

Pod生命周期 pod创建过程运行初始化容器&#xff08;init container&#xff09;过程运行主容器&#xff08;main container&#xff09;过程 容器启动后钩子&#xff08;post start&#xff09;、容器终止前钩子&#xff08;pre stop&#xff09;容器的存活性探测&#xff08;…...

高校房产管理系统用到了哪些技术?

数图互通高校房产管理系统是基于公司自主研发的FMCenterV5.0平通过在中国100多所高校的成功实施和迭代&#xff0c;形成了一套成熟、完善、全生命周期的房屋资源管理解决方案。台&#xff0c;是针对中国高校房产的管理特点和管理要求&#xff0c;研发的一套标准产品&#xff1b…...

【Python学习笔记】37.Python3 MySQL - mysql-connector 驱动(2)

前言 本章继续介绍MySQL - mysql-connector 驱动。 where 条件语句 如果我们要读取指定条件的数据&#xff0c;可以使用 where 语句&#xff1a; demo_mysql_test.py 读取 name 字段为 CSDN 的记录&#xff1a; import mysql.connectormydb mysql.connector.connect(host…...

【高级Java】高级Java实验

一、反射与动态代理1、&#xff08;4分&#xff09;请通过反射技术&#xff0c;为附件中的Person.class生成相应的.java代码&#xff0c;java代码中的方法的方法体为空&#xff0c;即方法内部代码不用生成。请注意生成的java代码的格式。2、&#xff08;3分&#xff09;请为第1…...

SYN480R 解码

目录1.空载情况下2.当有按键被按下3.数据帧分析4.同步码5.数据码6.对24位数据帧分析1.空载情况下 在空载情况下&#xff0c;syn480r 输出引脚&#xff0c;输出的是杂乱无序的波形 2.当有按键被按下 按下按键&#xff0c;会连续输出相同的脉冲波形&#xff0c;放大分析 3.数据…...

ASP .NET(基于.NET 6.0)源码解读

这几天一直在琢磨在我现有技术认知基础上&#xff0c;未来如何做技术提升。 日思夜想&#xff0c;我整理出了我自己的一套学习规划方案&#xff0c;并希望在实施过程中能够不断调整学习方案与方式&#xff0c;以接近自我提升的效率最大化。 从以下几个大的方面来得到提升&…...

阿里工作7年,一个30岁女软件测试工程师的心路历程

简单的先说一下&#xff0c;坐标杭州&#xff0c;14届本科毕业&#xff0c;算上年前在阿里巴巴的面试&#xff0c;一共有面试了有6家公司&#xff08;因为不想请假&#xff0c;因此只是每个晚上去其他公司面试&#xff0c;所以面试的公司比较少&#xff09; 其中成功的有4家&am…...

学生党必备的 Keychron 无线机械键盘

学生党必备的 Keychron 无线机械键盘 由于专业需要&#xff0c;之间的键盘使用起来不太舒服&#xff0c;于是准备重新买一个适合工作学习的键盘&#xff0c;于是通过朋友介绍了解到了keychron k3pro,当时也看到网上一些资料说道这款键盘比较到位&#xff0c;今天就来带大家了解…...

FPGA MAX 10 10M50系列10M50DAF484C8G/10M50DAF484C7G/10M50DCF484C7G规格

介绍MAX 10器件是单芯片、非易失性低成本可编程逻辑器件(pld)&#xff0c;用于集成最优的系统组件集。MAX 10设备的亮点包括:内部存储双配置闪存用户闪存即时支持集成模数转换器(adc)支持Nios II单芯片软核处理器MAX 10设备是系统管理、I/O扩展、通信控制平面、工业、汽车和消费…...

【codequ】Java学习路线整理(韩顺平)

文章目录Java学习路线一、Java基础1.建立编程思想Java概述变量运算符控制结构数据、排序和查找面向对象编程&#xff08;基础&#xff09;面向对象编程&#xff08;中级&#xff09;项目&学以致用2.提升编程能力3.分析需求&#xff0c;代码实现能力Java8新特性二、Java高级…...

服务器容器配置日志(Linux+x86_64+Ubuntu18.04+CUDA11.0+python3.7)

一、创建并进入容器 &#xff08;平台使用教学详细&#xff0c;这部分略写&#xff09; 登上服务器后&#xff0c;打开终端输入如下进入自己建的容器 ssh -p XXXXX root10.XXX.XXX.XXX //按自己的宿主机端口写二、安装Conda&#xff08;miniconda3&#xff09; &#xff08…...

2023年美赛赛题思路分析

2023年的赛题A-F题的整体难度不算太难&#xff0c;难度在于数据的收集上。整体难度上来看&#xff0c;难度上F题难度最小&#xff0c;建议直接上手。本次先给大家分享一些数据网站&#xff0c;在对各题做简单的思路分析。1、美国国家海洋和大气管理局Homepage | National Ocean…...

[C++]服务器与客户端建立连接与检测断开的demo

该程序在IP127.0.0.1以及端口5000环境下测试 有一段时间没有在Windows下用C进行网络编程了&#xff0c;这段日子都在做QT的网络编程和OpenCV的图像识别。 今天重新写个Windows下C的&#xff0c;基于TCP的双端连接建立与断开检测的demo&#xff0c;巩固下自己Windows下的网络编程…...

包教包会vue3+ts状态管理工具pinia

一、Pinia介绍 定义&#xff1a;pinia是和vuex一样的状态管理工具 语法&#xff1a;和 Vue3 一样&#xff0c;它实现状态管理有两种语法&#xff1a;选项式API 和 组合式API 支持&#xff1a;vue2、typeScript、devtools 二、使用步骤 1.安装 pnpm add pinia yarn add pin…...

Generated columns cannot be used in COPY

错误如下DBD::Pg::db do failed: ERROR: column "transtype" is a generated columnsec., avg: 2520 recs/sec), REPORTSINTERMEDIATETABLE in progress.DETAIL: Generated columns cannot be used in COPY. at /usr/local/share/perl5/Ora2Pg.pm line 15125.FATAL: …...

Amazon S3简介

前言&#xff1a; 这段时间来到了某大数据平台&#xff0c;做平台技术底座封装和一些架构等等&#xff0c;有结构化数据也有非结构数据&#xff0c;涉及到很多技术&#xff0c;自己也私下花时间去研究了很多&#xff0c;有很多纯技术类的还是需要梳理并记录&#xff0c;巩固以及…...

MySQL索引类型——有五种

文章目录前言一、MySQL中的索引类型有以下几种1.1 普通索引1.1.1 直接创建索引1.1.2 修改结构的方式添加索引1.1.3 创建表的时候同时创建索引1.1.4 删除索引1.2 唯一索引1.2.1 创建唯一索引1.2.2 修改表结构1.2.3 创建表的时候直接指定1.3 主键索引1.4 组合索引1.5 全文索引1.5…...

CloudCompare 二次开发(5)——非插件中的PCL环境配置(均匀采样为例)

目录 一、概述二、CMakeLists.txt三、源码编译四、代码示例五、结果展示一、概述 在进行CloudCompare二次开发的时候,可以直接在CloudCompare的核心功能中添加自己的算法,比插件式的算法集成要方便得多。因此,这里主要记录CloudCompare非插件式二次开发配置PCL,并给出具体开…...

停车辅助系统的技术和变化

各种各样的停车辅助系统已经存在了很长时间&#xff0c;但用户经常在不知道什么技术以及它是如何工作的情况下使用它们。 今天我们依次来谈谈停车辅助系统是什么&#xff0c;怎么发展以及如何应用的。 ​ 1.手信号 您可能会想&#xff0c;“为什么手信号是停车辅助系统&#x…...

扬帆优配|日均客运量恢复,民航业加速复苏,外资买入2股超亿元

春运民航客运量康复至疫情前七成。 2月16日&#xff0c;民航局举行2月例行新闻发布会。会上介绍&#xff0c;自1月7日至2月15日&#xff0c;春运40天&#xff0c;民航运送旅客5523万人次&#xff0c;日均客运量138万人次&#xff0c;同比去年春运添加39%&#xff0c;康复至2019…...

【PyTorch】教程:torch.nn.ModuleDict

Containers-ModuleList CLASS torch.nn.ModuleDict(modulesNone) 将所有的子模块放到一个字典中。 ModuleDict 可以像常规 Python 字典一样进行索引&#xff0c;但它包含的模块已正确注册&#xff0c;所有 Module 方法都可以看到。 ModuleDict 是一个有序字典。 Parameters …...

Git、小乌龟、Gitee的概述与安装应用超详细(组长与组员多人开发版本)

目录 一、概述 1.什么是Git&#xff1f; 2.Git历史来源 3.Git的优点? 4.什么是版本控制&#xff1f; 5.版本控制工具种类&#xff1f; 6.Git工作机制 7.Git、小乌龟、Gitee、凭据管理器的简单介绍 二、Git下载安装 下载Git 安装Git 安装完成后查看版本 三、下载小…...

【java 高并发编程之JUC】高阶JUC特性总结

1 线程中断机制 1.1 什么是中断&#xff1f; 首先 一个线程不应该由其他线程来强制中断或停止&#xff0c;而是应该由线程自己自行停止。所以&#xff0c;Thread.stop, Thread.suspend, Thread.resume 都已经被废弃了。 其次 在Java中没有办法立即停止一条线程&#xff0c;然…...

行业分析| 智能无人自助设备

智能无人自助设备运用二维码技术、音视频通信技术和AI智能技术等相结合&#xff0c;提供了无人超市、自动售货机、智能快递柜等。当下很多商业地区或社区&#xff0c;都放置了智能无人自助设备&#xff0c;不仅可以为商家节省时间和精力、提升运营环境&#xff0c;也可以为众多…...

使用契约测试得不偿失?试试契约先行开发

契约维护的难题 如今微服务凭借其灵活、易开发、易扩展等优势深入人心&#xff0c;不同服务之间的集成和交互日渐繁多且复杂。这些服务之间交互的方式是多样的&#xff0c;常见的有 HTTP 请求和消息队列。在它们交互的过程中&#xff0c;会有服务的版本演进&#xff0c;交互信…...

函数编程之Function

文章目录前言一、Function是什么&#xff1f;二、Function 怎么用?1.简单使用2.真正的强大之处总结前言 在java8之后,我已经习惯了开始用stream()方式编程,但是对于新引入的其他功能,还是不清楚,今天经历了一个编程问题后,让我对于Function() 这个函数有了新的认知; 一、Func…...

做外贸 英文网站/seo案例分享

用户登陆无法实现页面跳转问题&#xff0c;总是将页面跳到缺省页面/ok.jsp 解决方案&#xff1a;无法实现用户的useType校对&#xff0c;数据表中的userType为空页面刷新时会跳屏 原因是js中有修改css样式的语句 而该js文件又放在了body底部 所以当结构生成完 样式还没有开…...

企业网站建设的核心/2345网址导航官网官方电脑版下载

原标题&#xff1a;Win10的隐藏小秘密&#xff0c;被我发现了今天的小硕要来给大家分享一些小秘密&#xff01;当然&#xff0c;这可不是小硕自己的小秘密&#xff0c;是关于你电脑的小秘密哦&#xff01;知道吗&#xff1f;Windows10每一次升级更新&#xff0c;都会伴随着新功…...

h5手机网站源码下载/seo外链网

2019独角兽企业重金招聘Python工程师标准>>> function showStu(){ var NewTable document.getElementById("NewTable"); NewTable.style.display "table"; } 本身table是有样式的&#xff0c;如果要显示表格的时候&a…...

网站被做镜像什么意思/离我最近的广告公司

windows环境下 生成公钥和私钥 上传代码到远程仓库的时候需要秘钥进行验证是否本人上传的。打开Git目录下的Git Bash 输入ssh-keygen&#xff0c;回车 可直接不输入路径&#xff0c;使用默认路径&#xff08;c/Users/Administrator/.ssh/)按照提示要输入两次密码&#xff0c;但…...

门户网站的注意要素/西安百度推广开户运营

JAVA BaseRepository类下封装了一些方法。 1 新增 int insert(T record) : 插入一条记录&#xff1b; int insertSelective(T record) &#xff1a; 插入一条记录&#xff0c;Bean中null的字段不会被插入&#xff1b; int insertOptional(T record) : 插入一条记录&#xff0c;…...

易读网站建设/免费网站建设seo

现代的浏览器IE6和Firefox都支持客户端Gzip&#xff0c;也就是说&#xff0c;在服务器上的网页&#xff0c;传输之前&#xff0c;先使用Gzip压缩再传 输给客户端&#xff0c;客户端接收之后由浏览器解压显示&#xff0c;这样虽然稍微占用了一些服务器和客户端的CPU&#xff0c;…...