[Vue]组件间通讯

Vue组件间通讯

  1. 父子间通讯

  2. 非父子间通讯

父子间通讯

  1. 父组件通过 props 将数据传递给子组件父向子传值步骤

    1. 给子组件以添加属性的方式传值

    2. 子组件内部通过props接收

    3. 模板中直接使用 props接收  

  2. 子组件利用 $emit 通知父组件修改更新

    1.  $emit触发事件,给父组件发送消息通知

    2. 父组件监听$emit触发的事件

    3. 提供处理函数,在函数的性参中获取传过来的参数

非父子间通讯 event bus

event bus 事件总线 非父子组件之间,进行简易消息传递。(复杂场景→ Vuex)

  1. 创建一个都能访问的事件总线 (空Vue实例)

  2. A组件(接受方),导入Bus,监听Bus的 $on事件

created () {Bus.$on('sendMsg', (msg) => {this.msg = msg})
}
  1. B组件(发送方),导入Bus,触发Bus的 $emit事件

Bus.$emit('sendMsg', '这是一个消息')

非父子间通讯 provide&inject

  1. 父组件 provide提供数据

export default {provide () {return {// 普通类型【非响应式】color: this.color, // 复杂类型【响应式】userInfo: this.userInfo, }}
}
  1. 子/孙组件 inject获取数据

export default {inject: ['color','userInfo'],created () {console.log(this.color, this.userInfo)}
}

注意

  • provide提供的简单类型的数据不是响应式的,复杂类型数据是响应式。(推荐提供复杂类型数据)

  • 子/孙组件通过inject获取的数据,不能在自身组件内修改

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

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

相关文章

6、Design Script之列表

Range 在DesignScript中,Range是从起点到终点的一系列数字,使用指定的步距(间距类型),并有以下的初始化方法: start..end..step; start..end..#amount; start..end..~approximate; Range可以是数字的,也可以是字母的。 字母范围因大小写而异。 开始,结束. .#数量范围(…

html canvas怎么在图片上面加文字

在HTML canvas中,要让文字显示在图片上方,你需要按照以下步骤操作: 首先,使用drawImage()方法将图片绘制到canvas上。 然后,使用fillText()或strokeText()方法在canvas上绘制文本。 以下是一个简单的示例代码&#…

windbg调试协议wireshark抓包解析插件

把目录下文件复制到如下位置,Wireshark支持版本4.0以上 C:\Program Files\Wireshark\plugins\4.0\kdnet.lua C:\Program Files\Wireshark\gcrypt.dll C:\Program Files\Wireshark\luagcrypt.dll 启动 “C:\Program Files (x86)\Windows Kits\10\Debuggers\x64\windbg.exe” -k …

【Linux C | 多线程编程】线程的基础知识

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…

《烈焰》热播掀起国漫IP新热潮,玄机科技再显爆款制造实力

在这个春意盎然的3月,一部由玄机科技经典动画《武庚纪》改编的电视剧《烈焰》空降爱奇艺,于3月13日开播,迅速点燃了观众的热情。该剧凭借紧凑的剧情、精美的服化道以及高度还原的场景,不仅赢得了广大观众的喜爱,更在各…

基于ssm+layui的图书管理系统

基于ssmlayui的图书管理系统 账户类型分为:管理员,用户管理员私有功能用户私有功能公共功能技术栈功能实现图 视频演示 账户类型分为:管理员,用户 图书管理系统主要登录账户类型为管理员账户与用户账户 管理员私有功能 账户管理…

【Linux】Shell编程【一】

shell是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁。Shell 既是一种命令语言,又是一种程序设计语言。 Shell 是指一种应用程序,这个应用程序提供了一个界面,用户通过这个界面访问操作系统内核的服务。 Shell属于内置的…

MobileNeXt(ECCV 2020)

paper:Rethinking Bottleneck Structure for Efficient Mobile Network Design official implementation:GitHub - zhoudaquan/rethinking_bottleneck_design 存在的问题 Inverted residual block广泛应用于近年来的移动网络,它通过引入两…

前端实例:页面布局1(后端数据实现)

效果图 注&#xff1a;这里用到后端语言php&#xff08;页面是.php文件&#xff09;,提取纯html也可以用 inemployee_index.php <?php include(includes/session.inc); $Title _(内部员工首页); $ViewTopic 内部员工首页; $BookMark 内部员工首页; include(includes/…

【小白学机器学习8】统计里的自由度DF=degree of freedom, 以及关于df=n-k, df=n-k-1, df=n-1 等自由度公式

目录 1 自由度 /degree of freedom / df 1.1 物理学的自由度 1.2 数学里的自由度 1.2.1 数学里的自由度 1.2.2 用线性代数来理解自由度&#xff08;需要补充&#xff09; 1.2.3 统计里的自由度 1.3 统计学里自由度的定义 2 不同对象的自由度 2.1 纯公式的自由度&#…

Ant Design Pro complete版本的下载及运行

前言 complete 版本提供了很多基础、美观的页面和组件&#xff0c;对于前端不太熟练的小白十分友好&#xff0c;可以直接套用或者修改提供的代码完成自己的页面开发&#xff0c;简直不要太爽。故记录一些下载的步骤。 环境 E:\code>npm -v 9.8.1E:\code>node -v v18.1…

基于网络爬虫的购物平台价格监测系统的设计与实现

通过对网络爬虫的购物平台价格监测系统的业务流程进行梳理可知&#xff0c;网络爬虫的购物平台价格监测系统主要由前台买家模块、后台卖家模块以及管理员模块构成。前台功能包含登录功能、注册功能、系统首页功能、唯品会商品详情浏览、唯品会商品收藏、唯品会商品点赞、唯品会…