在之前的文章中我们提到了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的通信方式(二)---祖父孙三个级别的之间的隔代通信的更多相关文章

  1. Vue小项目二手书商城:(三)前端渲染数据

    实现内容: axios取到的数据在前端使用(父子组件各自应该怎么使用) 一.简单使用(在哪取在哪用) 1.在App.vue中script中加上data(data专属于当前组件,父子组件传参通过prop ...

  2. Vue学习小结(二)

    接上一批,小结(二). 三.导航内容(含左侧导航及顶部面包屑导航) 其实导航条主要根据element-ui的教程进行编写,官网:http://element-ui.cn/#/zh-CN/compone ...

  3. 整理4种Vue组件通信方式

    整理4种Vue组件通信方式 重点是梳理了前两个,父子组件通信和eventBus通信,我觉得Vue文档里的说明还是有一些简易,我自己第一遍是没看明白. 父子组件的通信 非父子组件的eventBus通信 ...

  4. Vue小项目二手书商城:(二)axios前后端数据交互

    实现内容: 写路由接口(express) axios取数据 一.写接口 1.我们要在前端取到后端的数据(之前写的data.json)可以用vue-resourse或者用axios,在vue2之后官方就 ...

  5. Vue小项目二手书商城:(一)准备工作、组件和路由

    本项目基于vue2.5.2,与低版本部分不同之处会在(五)参考资料中提出 完整程序:https://github.com/M-M-Monica/bukesi 实现内容: 资源准备(mock数据) 组件 ...

  6. 最全的Vue组件通信方式总结

    1.一图认清组件关系名词 父子关系:A与B.A与C.B与D.C与E 兄弟关系:B与C 隔代关系:A与D.A与E 非直系亲属:D与E 总结为三大类: 父子组件之间通信 兄弟组件之间通信 跨级通信 2.8 ...

  7. Vue组件通信方式(8种)

    1.一图认清组件关系名词 父子关系:A与B.A与C.B与D.C与E 兄弟关系:B与C 隔代关系:A与D.A与E 非直系亲属:D与E 总结为三大类: 父子组件之间通信 兄弟组件之间通信 跨级通信 2.8 ...

  8. Vue组件通信方式(一)

    组件与组件的关系,通常有父子关系,兄弟关系以及隔代关系. 针对不同的场景,如何选用适合的通信方式呢? (一) props/$emit parentComponent ==> childCompo ...

  9. 二叉堆(三)之 Java的实现

    概要 前面分别通过C和C++实现了二叉堆,本章给出二叉堆的Java版本.还是那句话,它们的原理一样,择其一了解即可. 目录1. 二叉堆的介绍2. 二叉堆的图文解析3. 二叉堆的Java实现(完整源码) ...

随机推荐

  1. React学习——子组件给父组件传值

    //子组件 var Child = React.createClass({ render: function(){ return ( <div> 请输入邮箱:<input onCha ...

  2. latex公式居中环境

    一般能够用到的环境是 \begin{equation} \begin{aligned} ... \end{aligned} \end{equation} 然而,这种环境用&只能够保证左对齐或者 ...

  3. SpringBoot整合MongoDB JPA,测试MongoRepository与MongoTemplate用法,简单增删改查+高级聚合

    源码 地址 -> https://github.com/TaoPanfeng/case/tree/master/04-mongo/springboot-mongo 一 引入依赖 <depe ...

  4. Django单元测试 相关知识

    前言 本文,旨在说明python Django如何编写单元测试,从“背景”,“测试要求”,“代码编写”,“如何运行”,“检验测试覆盖度” 这几个方面来说明附上django的官方文档单元测试章节=> ...

  5. 在Mysql中使用索引

    MySQL查询的优化是个老生常谈的问题,方法更是多种多样,其中最直接的就是创建索引. 这里通过一个简单的demo来实际用一下索引,看看索引在百万级别查询中速率的提升效果如何 所需数据可以从我前面的一篇 ...

  6. kubernetes资源清单之pod

    什么是pod? Pod是一组一个或多个容器(例如Docker容器),具有共享的存储/网络,以及有关如何运行这些容器的规范. Pod的内容始终位于同一地点,并在同一时间安排,并在共享上下文中运行. Po ...

  7. 九,configMap及secret的基本使用

    目录 制定容器配置的方式 configMap(存储数据为明文,敏感数据慎用) 创建configMap的几种方式 命令行创建和测试configMap实例 创建一个Pod 挂载测试 通过指定文件创建con ...

  8. Android异常与性能优化相关面试问题-其他优化面试问题详解

    Android不用静态变量存储数据: 静态变量等数据由于进程已经被杀死而被初始化.在Android中应用进程不是安全的,因为它会有系统给kill掉,但是在实际中可能会有这样的一个假象:当app被杀掉之 ...

  9. CSS基础学习-6.CSS属性_列表、表格

  10. MySQL中主键的选择与磁盘性能

    偶然看到了“Fotolog: Scaling the World\'s Largest Photo Blogging Community”,才发现很多数据库的优化其实道理都很简单,至高境界是当你面对问 ...