[Vue2] Vue2的12种组件通信

news/2024/7/10 2:13:51 标签: 前端, javascript, html, vue

Vue2.x 组件通信共有12种

  1. props
  2. $emit / v-on
  3. .sync
  4. v-model
  5. ref
  6. $children / $parent
  7. $attrs / $listeners
  8. provide / inject
  9. EventBus
  10. Vuex
  11. $root
  12. slot

父子组件通信可以用

props
$emit / v-on
$attrs / $listeners
ref
.sync
v-model
$children / $parent

兄弟组件通信可以用

EventBus
Vuex
$parent

跨层级组件通信可以用

provide/inject
EventBus
Vuex
$attrs / $listeners
$root

vue2_38">vue2通信使用

props
父组件向子组件传递数据
子组件接受到数据之后, 不能直接修改父组件的数据。会报错,所以当父组件重新渲染时,数据会被覆盖。如果子组件内要修改的话推荐使用 computed

$emit / v-on
子组件通过派发事件的方式给父组件数据,或者触发父组件更新等操作

.sync
可以帮我们实现父组件向子组件传递的数据的双向绑定,所以子组件接收到数据后可以直接修改,并且会同时修改父组件的数据

v-model
和 .sync 类似,可以实现将父组件传给子组件的数据为双向绑定,子组件通过 $emit 修改父组件的数据

ref
ref 如果在普通的DOM元素上,引用指向的就是该DOM元素
如果在子组件上,引用的指向就是子组件实例,然后父组件就可以通过 ref 主动获取子组件的属性或者调用子组件的方法

$children / $parent
$children:获取到一个包含所有子组件(不包含孙子组件)的 VueComponent 对象数组,可以直接拿到子组件中所有数据和方法等
$parent:获取到一个父节点的 VueComponent 对象,同样包含父节点中所有数据和方法等

$attrs / $listeners
多层嵌套组件传递数据时,如果只是传递数据,而不做中间处理的话就可以用这个,比如父组件向孙子组件传递数据时

attrs :包含父作用域里除 c l a s s 和 s t y l e 除外的非 p r o p s 属性集合。通过 t h i s . attrs:包含父作用域里除 class 和 style 除外的非 props 属性集合。通过 this.attrs:包含父作用域里除class和style除外的非props属性集合。通过this.attrs 获取父作用域中所有符合条件的属性集合,然后还要继续传给子组件内部的其他组件,就可以通过 v-bind=“$attrs”

listeners :包含父作用域里 . n a t i v e 除外的监听事件集合。如果还要继续传给子组件内部的其他组件,就可以通过 v − o n = " listeners:包含父作用域里 .native 除外的监听事件集合。如果还要继续传给子组件内部的其他组件,就可以通过 v-on="listeners:包含父作用域里.native除外的监听事件集合。如果还要继续传给子组件内部的其他组件,就可以通过v−on=“linteners”
使用方式是相同的

provide / inject
provide:可以让我们指定想要提供给后代组件的数据或方法
inject:在任何后代组件中接收想要添加在这个组件上的数据或方法,不管组件嵌套多深都可以直接拿来用
要注意的是 provide 和 inject 传递的数据不是响应式的,也就是说用 inject 接收来数据后,provide 里的数据改变了,后代组件中的数据不会改变,除非传入的就是一个可监听的对象

EventBus
EventBus 是中央事件总线,不管是父子组件,兄弟组件,跨层级组件等都可以使用它完成通信操作

Vuex
Vuex 是状态管理器,集中式存储管理所有组件的状态。

$root
$root 可以拿到 App.vue 里的数据和方法

slot
就是把子组件的数据通过插槽的方式传给父组件使用,然后再插回来


http://www.niftyadmin.cn/n/360486.html

相关文章

[论文评析]mixup: B EYOND E MPIRICAL R ISK M INIMIZATION, ICLR 2018,

mixup: B EYOND E MPIRICAL R ISK M INIMIZATION 介绍MixupMixup的提出动机Mixup与常规数据增广方法的区别References 介绍 采用ERM训练的模型往往存在泛化能力差的情形-可能是在简单的记忆样本, 对于噪声干扰的鲁棒性很差. 这篇论文提出了一种新的数据增广方法-Mixup, 这里主…

企业门户网站有用吗?如何解决搭建难题?

随着智能化时代的逐渐成熟,信息产业如火朝天,越来越多的人对门户网站开始感兴趣,不少企业家也开始对门户网站的开发与建设跃跃欲试。门户网站,也就是一个应用框架,把各类应用系统、互联网资源、数据资源集合到一个信息…

授权管理再工控安全中起到什么作用?

随着计算机技术、通信技术和控制技术的发展,工业自动化控制已经开始向网络化方向发展,从最初的CCS(计算机集中控制系统),到第二代的DCS(分散控制系统),发展到现在流行的FCS&#xff…

【通义千问】什么是通义千问,如何免费获得内测和使用方法。

什么是通义千问,如何免费获得内测和使用方法。 什么是通义千问怎么获得内测资格申请方法有两种第一种直接点击申请体验第二种直接点击使用邀请码 通义千问邀请码怎么获得参与社区活动邀请好友关注通义千问微信公众号参加通义千问线上课程向通义千问官方提问 通义千问…

常用adb命令记录下

adb devices 查看当前连接设备adb start-server 启动adb进程adb kill-server 终止adb进程adb shell 进入shell模式(Linux模式),当连接有多个设备时,需执行命令adb-s设备名shell 注:进入shell模式后序执行Linux命令adb install apk路径 安装apk至设备,当连接有多个设备时,需执行…

面了个阿里拿36K出来的,真是砂纸擦屁股,给我漏了一手

今年的春招已经结束,很多小伙伴收获不错,拿到了心仪的 offer。 各大论坛和社区里也看见不少小伙伴慷慨地分享了常见的面试题和八股文,为此咱这里也统一做一次大整理和大归类,这也算是划重点了。 俗话说得好,他山之石…

【数据安全-02】AI打假利器数字水印,及java+opencv实现

AIGC 的火爆引燃了数字水印,说实话数字水印并不是一项新的技术,但是这时候某些公司拿出来宣传一下特别应景,相应股票蹭蹭地涨。数字水印是什么呢,顾名思义,和我们在pdf中打的水印作用差不多,起到明确版权、…

树形dp问题套路

⭐️前言⭐️ 本篇文章旨在将二叉树中的树形dp问题模板化,借助信息体传递的方式,通解树形dp问题。 🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁 🍉博主将持续更新学习记录收获,友…