当有父组件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的更多相关文章

  1. Vue—组件传值及vuex的使用

    一.父子组件之间的传值 1.父组件向子组件传值: 子组件在props中创建一个属性,用以接收父组件传来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给 ...

  2. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  3. Vue组件传值方法调用

    1.子组件改变父组件的值 <father  label="云盘快照" name="name2"> <son :props='rows'   @ ...

  4. vue ---- 组件传值之间使用 v-model

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

  5. vue组件传值的三种方式,文字版解释

    父传子: 当子组件子父组件中当标签使用的时候,给子组件添加一个自定义属性,值为需要传递的值(如: <Child v-bind:parentToChild="parentMsg" ...

  6. Vue组件传值,父传子,子传父,非父子组件

    vue3中传值方式: 1.父组件向子组件传值 父组件Blog.vue <template> <div id="blog"> <Alert v-if=& ...

  7. Vue 组件 传值

    注意 Vue模板只能有一个对象,要想用多个对象时用div包裹 一.父组件->子组件 通过props 1.子组件: 声明:proprs =[‘xx’],xx是在父组件中引用子组件,子组件的属性(t ...

  8. vue组件传值 part2

    非父子组件传值 轻量级 视图层框架 复杂组件间传值,引进其他的工具或者设计模式 1.vuex 2.总线机制 //main line 1.在main.js中注册全局的bus Vue.prototype. ...

  9. Vue组件传值(二)之 非父子组件传值

    Vue中非父子组件之间是如何实现通信的? 本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章. 1.创建新的Vue实例引入项目中,通过$emit.$on来实现非父子组件传值: 1 <!DO ...

  10. Vue组件传值(一)之 父子之间如何传值

    Vue中组件之间是如何实现通信的? 1.父传子: 父传子父组件通过属性进行传值,子组件通过 props 进行接受: 1 父组件中: 2 3 <template> 4 <div id= ...

随机推荐

  1. netty实现的RPC框架

    自己手撸了一个nettyRPC框架,希望在这里给有兴趣的同学们做个参考. 要想实现nettyrpc需要了解的技术要点如下: spring的自定义注解.spring的bean的有关初始化. 反射和动态代 ...

  2. Java集合对象比对

    1. 场景描述 通过java代码从外围接口中获取数据并落地,已经存在的不落地,不存在的落地,因有部分字段变化是正常的,只需比对3个字段相同即为相同. 2. 解决方案 设置定时任务(三个标签完成spri ...

  3. android_layout_framelayout

    framelayout最大的特点,个人认为就是N个元素都会重叠地堆在左上角,除非你手动指定位置.相对布局relative也是如此,但是他妈的人家不可以指定布局的垂直与水平,frame可以,但是指定垂直 ...

  4. linux应用程序设计--GDB调试

    GDB简介:GDB是GNU发布的一款功能强大的程序调试工具,GDB主要完成下面三个方面功能: 一.GDB的使用操作 1.启动被调试程序. 2.让被调试的程序在指定的位置停住. 3.当程序被停住时,可以 ...

  5. RDIFramework.NET框架基于Quartz.Net实现任务调度详解及效果展示

    在上一篇Quartz.Net实现作业定时调度详解,我们通过实例代码详细讲解与演示了基于Quartz.NET开发的详细方法.本篇我们主要讲述基于RDIFramework.NET框架整合Quartz.NE ...

  6. 精美的在线icon

    super-tiny-icons(0.2.1)列表 序号 名称 图标 地址 是否使用 1 acast.svg https://cdn.jsdelivr.net/npm/super-tiny-icons ...

  7. 【Android UI】自定义带按钮的标题栏

    自定义标题栏在很多的android app中很常见,可以说是一种很有用的UI设计方法.自 己也本着学习的态度,经过一番各种坑,终于实现了,现总结如下: 一:大致流程 1.      对指定的andro ...

  8. 安卓开发之详解getChildFragmentManager和getsupportFragmentManager和getFragmentManager详解

    安卓开发之详解getChildFragmentManager和getsupportFragmentManager和getFragmentManager详解 getFragmentManager()所得 ...

  9. C#写好的类库dll在别人调用的时候也能看到注释的方法

    1.用///的方法添加注释 2.项目的属性里面,要选上"生成XML注释文档" 菜单 Project -> 'xxxx' Properties -> Build -> ...

  10. vue教程(五)--路由router介绍

    一.html页面中如何使用 1.引入 vue-router.js 2.安装插件 Vue.use(VueRouter) 3.创建路由对象 var router = new VueRouter({ // ...