Vue中不同组件通信的方式

2023-11-12

  1. props父组件向子组件传递  emit 子组件向父组件传递

  2.  $root $parent

    都能够实现访问父组件的属性的方法,两者的区别在于,如果存在多级子组件,通过$parent访问得到的是它最近一级的父组件,通过root访问得到的是根组件。

      $root 访问根元素。this.$root.属性名。可以将根组件作为一个全局store来访问或使用。

      $parent 访问父元素。this.$parent.属性名。

      $ref 父组件对于特定子组件进行访问 子组件标签需要添加ref属性值,父组件可通过this.$refs.ref属性值来访问实例

     3. provide inject :祖先组件中通过provide提供变量, 然后在子孙组件中通过inject注入变量。

      provide / inject API 主要解决了跨级组件间的通信问题,

       4. event hub/event bus $on $emit

       5. vuex 组件状态管理

       6. 本地储存:localStorage sissonStorage

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue中不同组件通信的方式 的相关文章

随机推荐

  • 1600*B. Jumping Jack(数学&&找规律)

    解析 一直往右条 直到第一次超过 x 如果当前和目标点 p x为偶数 则 p x 2 的那一步向左跳 这样会少跳 p x 正好补在多跳的这一段 如果为奇数 则不能除2 则继续跳 直到距离为偶数即可 x和x答案一样 include
  • java中this的使用

    一 本类中方法 属性 构造器的调用 1 属性的调用 当构造器中初始化对象的时候 如果形参名与属性名相同 这时候可以在等号左边的属性前面加上this表示 这个指向的是类的属性而不是指向形参 2 方法的调用 3 构造器的调用 1 在定义含参构造
  • kafka的核心参数配置

    2 kafka配置参数 broker id broker的id id是唯一的非负整数 集群的broker id不能重复 log dirs kafka存放数据的路径 可以是多个 多个使用逗号分隔即可 port server接受客户端连接的端口
  • 项目管理是做什么?

    项目管理在大企业中应用比较多 那么项目管理是做什么 项目管理能够为企业起到什么作用 1 什么是项目 项目是为完成一款产品 一项服务或者一种可交付成果进行的临时性任务 也就是说项目具有一个范围 时间等特性 需要在某一个时间段完成某一范围内的任
  • 25章 SPI—读写串行FLASH

    SPI 协议简介 3 条总线分别为SCK 时钟 MOSI 主出从入 MISO 主入从出 片选线为SS1 2 3 从设备 多少设备也就这三条ss MOSI和MISO能看出是全双工 输入输出两条线 可同时使用 NSSx下降沿选中当前设备 上升沿
  • requests方法的post请求方式

    0x01前言 对post请求方式 我们需要明确表单内容的类型 一般情况下 直接提交data参数即可 但如果前端对此有所校验 就需要根据实际情况进行调整 0x02常见的post方式 post form data 这里我自己搭建了个简单的登陆界
  • 文献可视化--vosviewer入门

    VOSviewer是一个用于构建和可视化文献计量网络的软件工具 这些网络可以例如包括期刊 研究人员或个人出版物 并且它们可以基于引用 书目耦合 共同引用或共同作者关系来构建 VOSviewer还提供文本挖掘功能 可用于构建和可视化从科学文献
  • 【论文精读】ACVNet: Attention Concatenation Volume for Accurate and Efficient Stereo Matching

    这是一篇CVPR 2022的文章 基于一种新颖的注意力权重代价体构建方法 设计了一种网络结构 用以立体匹配 视差估计 双目深度估计 原文链接 ACVNet 代码链接 https github com gangweiX ACVNet Abst
  • 华为od机考题目-敏感字段加密

    字符串长度小于等于127字符 只包含大小写字母数字下划线和偶数个双引号 命令字之间以一个或者多个下划线进行分隔 可以通过两个双引号来标识包含下划线d 的命令字或者空命令字 while 1 try k int input nums input
  • opencv (三十八)图像形态学—膨胀

    小白学视觉 笔记 扩展 include
  • 解决 Mac 左滑浏览器默认的返回事件

    阻止 document body style overscrollBehaviorX none 恢复 document body style overscrollBehaviorX auto 参考 https juejin cn post
  • 【MyCat简单介绍】

    1 MyCat简介 MyCat是MySQL分库分表的利器 MyCat的核心功能是分库分表 其配置数据库的主从模式还可实现读写分离 MyCat 是什么 MyCat是目前最流行的基于java语言编写的数据库中间件 是一个实现了MySQL协议的服
  • 图漾相机—windows- Python SDK(官网下载编译)

    文章目录 一 安装依赖 二 下载swig和SDK swig下载连接 https www swig org https www swig org 下载python SDK 下载 Windows Camport3 SDK 三 配置python和
  • 安卓 Android 11、12 不使用第三方 Recovery TWRP 刷入 Magisk v22+ 支持联发科

    测试机型 小米 10 至尊纪念版 Mi 10 Ultra 今天把 MIUI 版本更新到了 12 1 1 发现安卓版本升到了 11 接下来我就正常想刷 wzsx150 大佬的 TWRP 发现刷上去挂载不了 data 不支持安卓 11 网上搜索
  • uni-app 中使用uview生成测试小程序后报错:pleaseSetTranspileDependencies is not defined

    这是一篇踩坑文 记录一个uni app中的坑点 在uni app 中使用uview后在生成小程序后第一次编译时控制台报了这么一个错 在检查了许久的原因后最后找到的解决办法是 在文件 common vendor js 中搜索并删除下面这句话
  • 雷电模拟器中无法登录微信且抖音等视频类应用无法观看视频

    IP受限制解除 https jingyan baidu com article b2c186c83bb443c46ff6ff64 html 转载于 https www cnblogs com ysgcs p 9801374 html
  • docker容器开启mysql的binlog

    在宿主机的conf d里面创建my cnf 添加以下内容 mysqld binlog格式 binlog format mixed 存放地址 注意这个地址是docker容器里面的地址 不是宿主机里面的地址 log bin var lib my
  • vue项目CDN引入

    注 一些对系统并不是至关重要的文件诸如字体文件 css重置 js小插件 背景图片等可能适合使用CDN 因为即使CDN文件不可用 网站也能做到平稳退化 第一步 public index html 里 注 需引入vue并且main js中正常引
  • 联想ThinkStation C30工作站修复记录

    我使用联想ThinkStation C30开发算法 采用windows 64bit系统 前段时间 办公楼断电 导致ThinkStation C30工作站无法正常启动windows系统 一直黑屏 显示如下错误 有时闪烁显示下三角号 Intel
  • Vue中不同组件通信的方式

    props父组件向子组件传递 emit 子组件向父组件传递 root parent 都能够实现访问父组件的属性的方法 两者的区别在于 如果存在多级子组件 通过 parent访问得到的是它最近一级的父组件 通过root访问得到的是根组件 ro