当有父组件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. 绝对是全网最好的Splay 入门详解——洛谷P3369&BZOJ3224: Tyvj 1728 普通平衡树 包教包会

    平衡树是什么东西想必我就不用说太多了吧. 百度百科: 一个月之前的某天晚上,yuli巨佬为我们初步讲解了Splay,当时接触到了平衡树里的旋转等各种骚操作,感觉非常厉害.而第二天我调Splay的模板竟 ...

  2. android_MultiAutoCompleteTextView

    package cn.com.sxp;import android.app.Activity;import android.os.Bundle;import android.view.View;imp ...

  3. 基础篇-1.2Java世界的规章制度(上)

    1 Java标识符 在Java语言中,有类.对象.方法.变量.接口和自定义数据类型等等,他们的名字并不是确定的,需要我们自己命名.而Java标识符就是用来给类.对象.方法.变量.接口和自定义数据类型命 ...

  4. MyBatis从入门到精通(2):MyBatis XML方式的基本用法

    本章将通过完成权限管理的常见业务来学习 MyBatis XML方式的基本用法 2.1一个简单的权限控制需求 权限管理的需求: 一个用户拥有若干角色,一个角色拥有若干权限,权限就是对某个模块资源的某种操 ...

  5. 【题解】长度为素数的路径个数-C++

    Description 对于正整数n (3≤n<20),可以画出n阶的回形矩阵.下面画出的分别是3阶的,4阶的和7阶的回形矩阵: 对于n阶回形矩阵,从左上角出发,每步可以向右或向下走一格,走2* ...

  6. SpringCloud解析之Zuul(二)

    本文基于Spring Cloud Edgware.SR6,Zuul版本1.3.1,解析Zuul的请求拦截机制,让大家对Zuul的原理有个大概的认识和了解.如有不对的地方,欢迎指正. 在上一期的Spri ...

  7. Android总结之打开手机相册获取图片

    上一篇,总结了如何打开照相机获取图片,详情请看>>>> 这篇将总结如何打开手机存储(相册)来获取手机上的图片. 打开相册 在需要这个功能的类中,我们可以自定义一个方法openA ...

  8. LINUX下查找大文件及大的文件夹

    原帖地址:https://www.cnblogs.com/iyoume2008/p/6105590.html 今天正好碰到这样的问题,在博客园中看到有以上地址的一篇文章,照着上面的操作解决了问题,但是 ...

  9. 什么是WebP以及如何在WordPress中使用WebP图像

    图像通常是缓慢加载网页的最大原因之一.它们不仅减慢了加载时间,而且还可以占用服务器上的大量空间和资源.仔细选择文件类型并压缩它们有助于降低加载速度,但它们只能在图像质量受损之前进行优化.另一种选择是使 ...

  10. 02、HTML 基础

    1.HTML 标题 HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的. <!DOCTYPE html> <html> < ...