vue组件传值之$attrs、$listeners
当有父组件A,子组件B,孙子组件C的时候
A-B B-C 的传值想必大家应该都非常熟悉了,通过props和$emit和$on来进行传值
那么A-C之间的传值要怎么做呢?
1、event.bus总线传值
2、vuex 但是在项目不是很庞大,很复杂的时候使用vuex传值显得有点大材小用了
那要怎么做呢?下面就是我们要说的$attrs和$listeners,注意$attrs的类型为{ [key: string]: string } $listeners的类型为{ [key: string]: Function | Array<Function> }
组件A(父组件):

组件B(子组件):

组件C(孙子组件):

这样 就实现了组件A中的message的值传递给了孙子组件C,在组件C中就可以获取message的值
vue组件传值之$attrs、$listeners的更多相关文章
- Vue—组件传值及vuex的使用
一.父子组件之间的传值 1.父组件向子组件传值: 子组件在props中创建一个属性,用以接收父组件传来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给 ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- Vue组件传值方法调用
1.子组件改变父组件的值 <father label="云盘快照" name="name2"> <son :props='rows' @ ...
- vue ---- 组件传值之间使用 v-model
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
- vue组件传值的三种方式,文字版解释
父传子: 当子组件子父组件中当标签使用的时候,给子组件添加一个自定义属性,值为需要传递的值(如: <Child v-bind:parentToChild="parentMsg" ...
- Vue组件传值,父传子,子传父,非父子组件
vue3中传值方式: 1.父组件向子组件传值 父组件Blog.vue <template> <div id="blog"> <Alert v-if=& ...
- Vue 组件 传值
注意 Vue模板只能有一个对象,要想用多个对象时用div包裹 一.父组件->子组件 通过props 1.子组件: 声明:proprs =[‘xx’],xx是在父组件中引用子组件,子组件的属性(t ...
- vue组件传值 part2
非父子组件传值 轻量级 视图层框架 复杂组件间传值,引进其他的工具或者设计模式 1.vuex 2.总线机制 //main line 1.在main.js中注册全局的bus Vue.prototype. ...
- Vue组件传值(二)之 非父子组件传值
Vue中非父子组件之间是如何实现通信的? 本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章. 1.创建新的Vue实例引入项目中,通过$emit.$on来实现非父子组件传值: 1 <!DO ...
- Vue组件传值(一)之 父子之间如何传值
Vue中组件之间是如何实现通信的? 1.父传子: 父传子父组件通过属性进行传值,子组件通过 props 进行接受: 1 父组件中: 2 3 <template> 4 <div id= ...
随机推荐
- 机器学习经典算法之PageRank
Google 的两位创始人都是斯坦福大学的博士生,他们提出的 PageRank 算法受到了论文影响力因子的评价启发.当一篇论文被引用的次数越多,证明这篇论文的影响力越大.正是这个想法解决了当时网页检索 ...
- 以Spring Cache扩展为例介绍如何进行高效的源码的阅读
摘要 日常开发中,需要用到各种各样的框架来实现API.系统的构建.作为程序员,除了会使用框架还必须要了解框架工作的原理.这样可以便于我们排查问题,和自定义的扩展.那么如何去学习框架呢.通常我们通过阅读 ...
- Spring MVC源码(三) ----- @RequestBody和@ResponseBody原理解析
概述 在SpringMVC的使用时,往往会用到@RequestBody和@ResponseBody两个注解,尤其是处理ajax请求必然要使用@ResponseBody注解.这两个注解对应着Contro ...
- SP1805 HISTOGRA - Largest Rectangle in a Histogram 题解
题目链接:https://www.luogu.org/problemnew/show/SP1805 分析: 我们可以用一个单调栈由低到高来存储它的高度,并用数组对每个高度记录一下它前面(包括它自己)一 ...
- 网络框架,互联网的组成,OSI七层协议,抽象层
6.25自我总结 1.网络框架 1.单机 单机游戏 以下两个基于网络的 2.CS架构 cs--->client客户/server服务 服务端(应用程序)一个就够了,客户端(应用程序)可以有多个 ...
- python中的字典,if_while使用
1.定义两个字典用于表述你的个人信息 第一个字典存放你的这些信息:姓名.性别.年龄.身高第二个字典存放你的其他信息:性格.爱好.座右铭将两个字典合并为第三个字典之后,打印出来 觉得自己很年轻的,可以去 ...
- python函数基础-参数-返回值-注释-01
什么是函数 函数就是有特定功能的工具 # python中有内置函数(python解释器预先封装好的)与自定义函数(用户自定义封装的)之分 为什么要用函数 # 可以减少代码冗余,增加代码复用性 # 使代 ...
- .Net MVC 动态生成LayUI tree
.Net MVC 动态生成LayUI tree 最近在做项目的过程中需要用到Tree插件,所以找了一堆Tree发现LayUI的Tree样式比较好看,所以开始搞! 1.Layui部分 1.1 首先引用文 ...
- 微信小程序设计总结
微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 小程序提供了一个简单.高效的应用开发框架和丰富的组件及API,帮助开发者在微信中开发具有原生 A ...
- Codeforces Round #486 (Div. 3) C "Equal Sums" (map+pair<>)
传送门 •题意 给k个数列,从中k个数列中找出任意2个数列 i ,j 使得数列i删除第x个数,和数列j删除第y个数的和相等 若存在,输出 i ,x 和 j,y •思路 每个数列之间的联系为数列的和之间 ...