【前端框架-Vue-基础】$attr及$listeners实现跨多级组件的通信

父子

A 组件与 B 组件之间的通信: (父子组件)
如上图所示,A、B、C三个组件依次嵌套,按照 Vue 的开发习惯,父子组件通信可以通过以下方式实现:

A to B 通过props的方式向子组件传递,B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现
通过设置全局Vuex共享状态,通过 computed 计算属性和 commit mutation的方式实现数据的获取和更新,以达到父子组件通信的目的。
Vue Event Bus,使用Vue的实例,实现事件的监听和发布,实现组件之间的传递。
往往数据在不需要全局的情况而仅仅是父子组件通信时,使用第一种方式即可满足。

跨多级

A 组件与 C 组件之间的通信: (跨多级的组件嵌套关系)
如上图,A 组件与 C 组件之间属于跨多级的组件嵌套关系,以往两者之间如需实现通信,往往通过以下方式实现:

借助 B 组件的中转,从上到下props依次传递,从下至上,$emit事件的传递,达到跨级组件通信的效果
借助Vuex的全局状态共享
Vue Event Bus,使用Vue的实例,实现事件的监听和发布,实现组件之间的传递。

问题

显然,第一种通过props和$emit的方式,使得组件之间的业务逻辑臃肿不堪,B组件在其中仅仅充当的是一个中转站的作用。如使用第二种 Vuex的方式,某些情况下似乎又有点大材小用的意味,(仅仅是想实现组件之间的一个数据传递,并非数据共享的概念)。第三种情况的使用在实际的项目操作中发现,如不能实现很好的事件监听与发布的管理,往往容易导致数据流的混乱,在多人协作的项目中,不利于项目的维护。

解决方案

在ABC父子孙三个组件中,子组件及B中代码类似下面这样:

<template><div class="child-1"><p>in child1:</p><p>props: {{pChild1}}</p><p>$attrs: {{$attrs}}</p><hr><!-- C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 --><!-- 通过v-bind 绑定$attrs属性,C组件可以直接获取到A组件中传递下来的props(除了B组件中props声明的) --><child2 v-bind="$attrs" v-on="$listeners"></child2></div>
</template>
<script>import Child2 from './Child2.vue';export default {props: ['pChild1'],data () {return {};},inheritAttrs: false,components: { Child2 },mounted () {this.$emit('test1');}};
</script>

v-bind属性$attr,保证C组件能够获取到A组件传递下来的props(除props属性中声明的属性以外);

而v-bind属性$listeners,则保证C组件能直接调用A组件的方法。


更多专业前端知识,请上 【猿2048】www.mk2048.com

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

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

相关文章

html笔记(一)html4+css2.0、css基础和属性、盒模型

w3c 官网 这里是 html4 的内容 大标题小节一、关于HTML1. 基本语法2. HTML常用标签3. 相对路径和绝对路径二、css基础1. 表单元素2. 创建样式表3. css语法4. css选择器三、css的相关属性1. 列表 li 独有的属性list-style2. 边框属性border3. overflow4. 浮动 float 遇到的坑5.…

JUnit:使用Java 8和Lambda表达式测试异常

在JUnit中&#xff0c;有许多方法可以在测试代码中测试异常&#xff0c;包括try-catch idiom JUnit Rule和catch-exception库。 从Java 8开始&#xff0c;我们还有另一种处理异常的方法&#xff1a;使用lambda表达式。 在这篇简短的博客文章中&#xff0c;我将演示一个简单的示…

动态语言和静态语言的比较

一 、静态语言的优势到底在哪&#xff1f; 来自robbin 摘自 http://www.javaeye.com/article/33971?page7 引用是像Java或者C&#xff03;这样强类型的准静态语言在实现复杂的业务逻辑、开发大型商业系统、以及那些生命周期很长的应用中也有着非常强的优势这是一个存在于大家心…

sqlserver2012——使用子查询

1 select A.成绩&#xff0c;A.分数,B.姓名 FROM 成绩信息 A, 学生信息 BWHERE A.学生编号B.学号 AND A.课程编号‘2’ AND A.考试编号‘0801’ AND A.分数 <( SELECT AVG(分数) FROM 成绩信息 A&#xff0c;学生信息 B where A.学生编号B.学号 AND A.课程编号‘2’ and A.…

返回顶部小火箭

代码如下&#xff1a; <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title></title><style>body {width: 2000px;}.top{position: fixed;right:50px;bottom:100px;display: none;}</style&…

最佳5本Java性能调优书籍–精选,必读

为什么Java开发人员应该阅读有关性能调优的书&#xff1f; 当我很久以前第一次面对这个问题时&#xff0c;我以为以后会做&#xff0c;但是我很长一段时间都没有回过头来。 仅当我在用Java编写的任务关键型服务器端财务应用程序中遇到严重的性能和可伸缩性问题时&#xff0c;我…

html笔记(三)html5+css3(html5、css3、文字相关)

W3school在线教程 html5css3基本不兼容ie678。 大标题小节一、html51. html4 和 html5 的区别2. 标签语义化3. 智能表单的使用和规范二、css3选择器1. 属性选择器2. 结构性伪类选择器&#xff08;层级选择器/符&#xff09;3. UI状态性伪类选择器4. 相邻兄弟选择器5. 其他选择…

美登杯 E、小花梨的数组* 线段树

操作过程中标记传递 询问的时候再计算 #include<bits/stdc.h> using namespace std; //input by bxd #define rep(i,a,b) for(int i(a);i<(b);i) #define repp(i,a,b) for(int i(a);i>(b);--i) #define RI(n) scanf("%d",&(n)) #define RII(n,m) sc…

删除Windows Service

删除的办法有两个&#xff1a; 办法一&#xff1a; 用sc.exe这个Windows命令 开始——运行——cmd.exe&#xff0c;然后输入sc就可以看到了。使用办法很简单&#xff1a; sc delete "服务名" (如果服务名中间有空格&#xff0c;就需要前后加引号&am…

怎么得到scrollTop

我们学习一个事件 &#xff1a; 页面滚动效果 window.onscroll function() { 页面滚动语句 } 谷歌浏览器 和没有声明 DTD <DOCTYPE > &#xff1a; document.body.scrollTop; 火狐 和其他浏览器 document.documentElement.scrollTop; ie9 和 最新浏览器…

如何使用Spring和Velocity在Java中编写HTML电子邮件

在这篇文章中&#xff0c;我将介绍如何使用Spring和Velocity格式化和发送自动电子邮件。 Spring仅提供创建简单文本电子邮件的功能&#xff0c;这对于简单的情况很好&#xff0c;但是在典型的企业应用程序中&#xff0c;由于多种原因&#xff0c;您不希望这样做&#xff1a; 用…

console.log打印没有效果

今天用谷歌调试的时候&#xff0c;遇到了一个很奇怪的现象&#xff0c;console.log() 完全不出效果&#xff0c;把它放到script下的第一行也没有用。然后借鉴了几个博主的。 直接改 https://blog.csdn.net/wujy_rrycbar2016/article/details/78341973 打开控制台 -> 改为 D…

WINCE知识点滴

1.CE下同名设备不能大于10 CE5.0中已经没有这个问题了&#xff0c;以前的版本可以这样做&#xff1a;只给上层输出一个设备&#xff0c;然后用一个IOCTL去打开一个个的物理设备这样就可以做到不受任何限制了 2.MDD与PDD 一个驱动程序通常会被分成硬件相关&#xff08;PDD&#…

English Words and Expressions

Words apprentice 学徒 corny 老套的 obnoxious 作呕的 intermezzo 间奏曲 predate 日期上早于 parenthesis 括号 delimiter 分隔符 utopian 乌托邦 overhyped 过头的 hype 夸张宣传 nascent 新生的 ramifications 分支、结果 intractable 难处理的 empirically 经验上的 shrou…

CSS实战2

1. 鼠标样式 Cursor: pointer 鼠标变成小手 Cursor: default; 小白 Cursor : move; 移动 Cursor : text ; 文本输入 网页布局&#xff1a; 给一个盒子 &#xff1a; 宽度高度 背景 边框 位置 2.border-radius 圆角矩形 border-radius: 7px 7px 7p…

Linux Shell 常用命令与目录分区的学习总结

很早就想根据自己的学习规律和遗忘规律&#xff0c;自己总结一下Linux/Unix系统的Shell命令&#xff0c;一来便于自己时常查询之用&#xff0c;二来也分享于各位博友 Linux shell是系统的用户界面&#xff0c;即命令行。它提供了用户与内核进行交互式操作与控制的接口&#xff…

为数据访问代码编写测试–不测试框架

当我们向数据访问代码编写测试时&#xff0c;是否应该测试其公共API的每种方法&#xff1f; 一开始听起来很自然。 毕竟&#xff0c;如果我们不对所有内容进行测试&#xff0c;那么如何知道我们的代码可以按预期工作呢&#xff1f; 这个问题为我们提供了重要的线索&#xff1…

visual studio 应用场景

转载于:https://www.cnblogs.com/zhangbing12304/p/10894347.html

elementUI-添加自定义图标

elementui的小图标有限&#xff0c;跟UI给的不一样&#xff0c;这个时候咋办呢&#xff1f;百度走起。。。。参考了两篇博主分享的 自定义elementui中的图标 和 建立图标库&#xff0c;这里主要用到第一种 实际中&#xff1a; elementUI导航栏 具体代码&#xff1a; //自定…

富文本wangEditor的批量激活

最近项目中使用了wangEditor这个轻量级的富文本框&#xff0c;由于需求是一个页面中会有多个富文本框同时激活&#xff0c;所以写了个批量激活的jquery方法&#xff0c;分享一下 1 // 激活富文本框2 var wangEditorActive function(){3 var wBoxs $(".editorbox&quo…