vue的通信方式(二)---祖父孙三个级别的之间的隔代通信
在之前的文章中我们提到了vue常用的几种通信方式,如父子,子父,以及兄弟组件之间的通信,可以通过这个传送门了解他们:Vue通信方式(一)
当我们如果遇到祖组件,父组件,孙组件,三个级别嵌套时,我们该怎么在祖组件与孙组件之间通信呢,当然通过本地存储或者Vuex都可以实现,但仅仅是一个值得时候未免有点小题大做了,或者是组件之间的通信那样一级一级传?有点麻烦,在此,我们就详解如何实现祖孙之间的通信。
首先我们来看看vue新增的两个属性:$attrs和$listeners,这是vue2.4新增的两个属性,我们来看看官方文档是怎么解释的吧。
好吧,对于第一次看的童鞋来说,并不知道他在BB什么, 简要的讲就是,$attrs可以获取父作用域传入的值(不包括props中的),$listeners相当于父作用域的事件监听器,那我们就可以用这两个属性实现祖孙之间的数据通信
首先,我们定义一个祖级别的组件:father1.vue
<template>
<h6>父组件:
<p>这是来自c组件的数据:{{msg1}}</p>
<div>
<B :messagec="messagec" :msgc="msgc2" v-on:getCData="getCData"></B>
</div>
</h6>
</template> <script>
import B from './son.vue'
export default{
data() {
return {
messagec:{a:,c:}, //传递给c组件的数据,可以传对象,字符串以及其他类型
msg:'',
msg1:'',
msgc2:'第二个传给孙组件的值'
}
},
components:{
B
},
methods:{
//执行C子组件触发的事件
getCData(val){
console.log("这是来自C组件的数据:"+val)
this.msg1=val
}
}
}
</script>
然后在定义一个父级别的组件:son.vue,相当于祖孙通信之间的中间件
<template>
<h1>这是子组件:
<div>
<p>这是B组件</p>
<!-- C组件中能直接触发getCData的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
<!-- 通过v-bind 绑定$attrs属性,C组件可以直接获取到A组件中传递下来的props(除了B组件中props声明的) -->
<C v-bind="$attrs" v-on="$listeners"></C>
</div>
</h1>
</template> <script>
import C from './c.vue' // 引入C组件
export default{
data(){
return {
mymessage:''
}
},
components:{
C
},
props:{
// messagec:String // 当在这个组件声明了传向C组件的值时,C组件则通过$attrs.messagec得不到该值,相当于被拦截了,要传给C,则不能在此声明
},
methods:{
}
}
</script>
主要是绑定两个属性v-bind="$attrs" v-on="$listeners",并且不能在props中声明传入的值,"$attrs"用于接受father.vue传入的值,$listeners用于监听触发事件传值给father.vue.
最后我们定义一个孙级别的组件:c.vue
<template>
<h1>这是C组件:
<p>接受来自father的值:{{$attrs.messagec.a}}</p>
<p>接受来自father第二个的值:{{$attrs.msgc}}</p>
<input type="text" v-model="msgtofather" @input="passCData(msgtofather)">
</h1>
</template> <script>
export default{
data(){
return{
msgtofather:'' //传给father组件的值
}
},
props:{
// messagec:String // 当在这个组件声明了传向C组件的值时,C组件则通过$attrs.messagec得不到该值,相当于被拦截了,要传给C,则不能在此声明
},
methods:{
passCData(val){
//触发父组件father中的事件
this.$emit('getCData',val)
}
}
}
</script>
注意:此组件中props也不能声明父组件传入的值,否则$attrs.messagec.a会取不到该值,并且可以接受多个来自祖组件的值
最后,组件通信的测试图如下:
vue的通信方式(二)---祖父孙三个级别的之间的隔代通信的更多相关文章
- Vue小项目二手书商城:(三)前端渲染数据
实现内容: axios取到的数据在前端使用(父子组件各自应该怎么使用) 一.简单使用(在哪取在哪用) 1.在App.vue中script中加上data(data专属于当前组件,父子组件传参通过prop ...
- Vue学习小结(二)
接上一批,小结(二). 三.导航内容(含左侧导航及顶部面包屑导航) 其实导航条主要根据element-ui的教程进行编写,官网:http://element-ui.cn/#/zh-CN/compone ...
- 整理4种Vue组件通信方式
整理4种Vue组件通信方式 重点是梳理了前两个,父子组件通信和eventBus通信,我觉得Vue文档里的说明还是有一些简易,我自己第一遍是没看明白. 父子组件的通信 非父子组件的eventBus通信 ...
- Vue小项目二手书商城:(二)axios前后端数据交互
实现内容: 写路由接口(express) axios取数据 一.写接口 1.我们要在前端取到后端的数据(之前写的data.json)可以用vue-resourse或者用axios,在vue2之后官方就 ...
- Vue小项目二手书商城:(一)准备工作、组件和路由
本项目基于vue2.5.2,与低版本部分不同之处会在(五)参考资料中提出 完整程序:https://github.com/M-M-Monica/bukesi 实现内容: 资源准备(mock数据) 组件 ...
- 最全的Vue组件通信方式总结
1.一图认清组件关系名词 父子关系:A与B.A与C.B与D.C与E 兄弟关系:B与C 隔代关系:A与D.A与E 非直系亲属:D与E 总结为三大类: 父子组件之间通信 兄弟组件之间通信 跨级通信 2.8 ...
- Vue组件通信方式(8种)
1.一图认清组件关系名词 父子关系:A与B.A与C.B与D.C与E 兄弟关系:B与C 隔代关系:A与D.A与E 非直系亲属:D与E 总结为三大类: 父子组件之间通信 兄弟组件之间通信 跨级通信 2.8 ...
- Vue组件通信方式(一)
组件与组件的关系,通常有父子关系,兄弟关系以及隔代关系. 针对不同的场景,如何选用适合的通信方式呢? (一) props/$emit parentComponent ==> childCompo ...
- 二叉堆(三)之 Java的实现
概要 前面分别通过C和C++实现了二叉堆,本章给出二叉堆的Java版本.还是那句话,它们的原理一样,择其一了解即可. 目录1. 二叉堆的介绍2. 二叉堆的图文解析3. 二叉堆的Java实现(完整源码) ...
随机推荐
- 使用modle1(jsp+javabeans)及cookie技术实现商品展示和浏览记录
步骤1:创建dbHelper工具类,该类主要用于获取数据库连接,采用单例模式. 步骤2:创建实体类商品类,商品表,在dao实现数据的封装处理. 步骤3:在jsp页面导入实体类,调用DAO的静态方案获取 ...
- CSS总结六:动画(一)ransition:过渡、animation:动画、贝塞尔曲线、step值的应用
transition-property transition-duration transition-timing-function transition-delay animation-name a ...
- JavaScript和Java是不同公司开发的不同产品
首先,JavaScript和Java是不同公司开发的不同产品.javascript是Netscape的产品.它的目的是扩展Netscape Navigator功能,开发一种可以嵌入到网页中的对象和事件 ...
- 在javascript中:(函数()()是一个匿名函数
在javascript中:(函数()()是一个匿名函数,它主要使用函数中的变量范围来避免全局变量,影响整个页面环境,并提高代码兼容性. (函数())是标准函数定义,但不会复制到任何变量.所以有一个没有 ...
- docker 安装ps命令
apt-get update && apt-get install procps
- Solved: XXX esx.problem.hyperthreading.unmitigated.formatOnHost not found XXX
esxi 出现XXX esx.problem.hyperthreading.unmitigated.formatOnHost not found XXX 问题. 回避方法: 将高级设置-->Us ...
- 《Linux就该这么学》day1-day2
ps:原谅我的书法出自鲁迅的<野草> <Linux就该这么学>书本介绍: 本书是由全国多名红帽架构师(RHCA)基于最新Linux系统共同编写的高质量Linux技术自学教程,极 ...
- stm32WB 笔记
1.HAL Debug functions(调试功能) 可以在不同模式下使能或者失能调试器 This section provides functions allowing to:• Enable/D ...
- zabbix4.2Proxy安装文档
zabbix4.2Proxy安装文档 目录 zabbix4.2Proxy安装文档 1 一.安装 2 1.前期安装准备 2 2.安装zabbix RPM源 3 2.1下载zabb ...
- 1.Shell脚本
1.Shell脚本 可以将Shell终端解释器当作人与计算机硬件之间的“翻译官”,它作为用户与Linux系统内部的通信媒介,除了能够支持各种变量与参数外,还提供了诸如循环.分支等高级编 程语言才有的控 ...