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= ...
随机推荐
- springmvc上传文件踩过的坑
@RequestMapping("/addTweet") public String addTweet(TweetVO tweetVO, HttpServletRequest re ...
- 渐进式web应用开发--拥抱离线优先(三)
_ 阅读目录 一:什么是离线优先? 二:常用的缓存模式 三:混合与匹配,创造新模式 四:规划缓存策略 五:实现缓存策略 回到顶部 一:什么是离线优先? 传统的web应用完全依赖于服务器端,比如像很早以 ...
- Docker笔记(四):Docker镜像管理
原文地址:http://blog.jboost.cn/2019/07/16/docker-4.html 在Docker中,应用是通过容器来运行的,而容器的运行是基于镜像的,类似面向对象设计中类与对象的 ...
- 数据结构-树以及深度、广度优先遍历(递归和非递归,python实现)
前面我们介绍了队列.堆栈.链表,你亲自动手实践了吗?今天我们来到了树的部分,树在数据结构中是非常重要的一部分,树的应用有很多很多,树的种类也有很多很多,今天我们就先来创建一个普通的树.其他各种各样的树 ...
- ThreadGroup详细讲解
import java.util.concurrent.TimeUnit; public class Test { public static void main(String[] args){ // ...
- 「PowerBI」分析服务多维数据结构重回关系数据库的一大绝招
在过往Excel催化剂定位的轻量级Excel+PowerBIDesktop的解决方案中,已经做过了近乎完美的PowerBIDesktop数据模型数据导出到Excel工作表的应用,这也是个人版数据应用的 ...
- HDU-1576 A/B 基础数论+解题报告
HDU-1576 A/B 基础数论+解题报告 题意 求(A/B)%9973,但由于A很大,我们只给出n(n=A%9973) (我们给定的A必能被B整除,且gcd(B,9973) = 1). 输入 数据 ...
- linux初学者-pxe装机篇
linux初学者-pxe装机篇 PXE的网络装机是客户机从自己的网卡启动,向本网络中的DHCP服务器索取ip,并从本网络的TFTP服务器中索取启动文件进行装机.此装机需要kickstart.tftp. ...
- XTTS系列之一:U2L迁移解决方案之XTTS的使用
本系列的定位是对XTTS及相关技术进行深入的学习研究.作为本系列的开篇,本着实用性的原则,我先把一次实际生产环境U2L的迁移实战实施方案进行提炼简化,旨在能清楚说明该如何使用XTTS这种解决方案来进行 ...
- <表格>
一.列表 信息资源的一种展示形式 二.列表的分类 1.有序列表 <ol> <li>列表项1</li> <li>列表项2</li> </ ...