今天在使用$attrs的时候遇到一个问题:

父组件:

<PanelContainer name="正向舆情">
<PositiveOpinion opinion="positive" />
</PanelContainer>

我在子组件中没有用props保存这个值,按理说应该会把值传给孙子层,但在孙子层通过this.$attrs.opinion并没有获取到值,

后来发现要在子组件上写:v-bind="$attrs"

<template>
<Opinion :color="$attrs.color" v-bind="$attrs"></Opinion>
</template>

这样在孙子组件就可以通过this.$attrs.opinion获取到值啦~撒花

vue多层传递$attrs的更多相关文章

  1. 【Vue】中 $attrs 中的使用方法

    vue官网是这样介绍的: 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外).当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 ( ...

  2. vue inheritAttrs、$attrs和$listeners使用

    inheritAttrs.$attrs和$listeners使用场景: 组件传值,尤其是祖孙组件有跨度的传值. (1)inheritAttrs 属性说明:https://cn.vuejs.org/v2 ...

  3. vue 组件传值$attrs $listeners $bus provide/inject $parent/$children

    $attrs 包含了父作用域中不作为prop被识别的特性绑定,当一个组件没有声明props时,这里会包含所有父作用域的绑定, $listeneers 包含了父作用域中的v-on事件监听器,它可以通过v ...

  4. vue中的$attrs属性和inheritAttrs属性

    一.vue中,默认情况下,调用组件时,传入一些没有在props中定义的属性,会把这些“非法”属性渲染在组件的根元素上(有一些属性除外),而这些“非法”的属性会记录在$attrs属性上. 二.如何控制不 ...

  5. 组件-vue自定义方法传递

    组件样式 面包屑导航栏 js Vue.component('bannerOne', { created() { console.log(this.bigbackColor); }, props: { ...

  6. vue 多层组件相互嵌套的时候 数据源更新 dom没更新 彻底清除组件缓存

    当项目中存在多层组件相互嵌套 组件存在严重缓存时  this.$nextTick(() => { ..... }); 不管用 this.$forceUpdate(); 不管用 只能通过深拷贝浅拷 ...

  7. vue 听说你很会传值?

    前置 大小 vue 项目都离不开组件通讯, 在这里总结一下vue组件通讯方式并列出, 都是简单的例子. 适合像我这样的小白.如有错误,欢迎指正. 温馨提示: 下文没有列出 vuex, vuex 也是重 ...

  8. js 整理 前端知识点 前端面试题 (2020)(vue)

    数据类型 字符串(String).数字(Number).布尔(Boolean).对空(Null).未定义(Undefined).Symbol. 引用数据类型:对象(Object).数组(Array). ...

  9. vue组件之间通信总结(超详细)

    组件通信在我们平时开发过程中,特别是在vue和在react中,有着举足轻重的地位.本篇将总结在vue中,组件之间通信的几种方式: props.$emit $parent.$children $attr ...

随机推荐

  1. oracle-SYSTEM表空间的备份与恢复

    oracle-SYSTEM表空间的备份与恢复 这一篇在介绍备份及恢复数据文件的方法时,以备份和重做日志(包括归档日志和在线日志)没有丢失为前提 所谓关键数据文件:system表空间的数据文件与参数un ...

  2. 【HANA系列】SAP HANA 2.0简介

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA 2.0简介   ...

  3. 6.文件所有权和权限----免费设置匿名----Windows键盘记录器----简介和python模块

    文件所有权和权限 touch --help cd Desktop mkdir Folder cd Folder clear touch Test1 Test2 Test3 Test4 ls ls -l ...

  4. SpringBoot项目快速启动停止脚本

    SpringBoot项目快速启动停止脚本 1.在jar包同级目录下,创建 app.sh #!/bin/bash appName=`ls|grep .jar$` if [ -z $appName ] t ...

  5. [转帖]是时候深入了解Linux的系统结构

    是时候深入了解Linux的系统结构   http://os.51cto.com/art/201905/596011.htm linux的体系结果 其实自己也知道 linus 做了一个 kernel 大 ...

  6. mysql日志信息查看与设置mysql-bin

    查看 sql查询记录  日志是否开启 SHOW GLOBAL VARIABLES LIKE '%general_log%' 二进制日志 是否开启 SHOW GLOBAL VARIABLES LIKE ...

  7. 06: django+celery+redis

    目录: 1.1 Celery介绍 1.2 celery 组件 1.3 安装相关包 与 管理命令 1.4 celery与Django执行异步任务 1.5 在django中使用计划任务功能 1.1 Cel ...

  8. SSM框架中数据库无法连接的问题

    首先是SSM框架中所有的配置都是没有问题的,而且项目在其他人的环境上也能正常访问数据库:那么最有可能的就是数据库版本的问题导致数据库连接不上,服务器给我的报错是: 15:37:25.902 [C3P0 ...

  9. python学习第五十二天logging模块的使用

    很多程序都有记录日志的需求,并且日志包含的信息即有正常的程序访问日志,还可能有错误,警告等信息输出,python的 logging模块提供了标准的日志接口,你可以通过它存储各种格式的日志,loggin ...

  10. CodeForces - 714E + POJ - 3666 (dp严格单调递增与非严格单调递增)

    左偏树 炒鸡棒的论文<左偏树的特点及其应用> 虽然题目要求比论文多了一个条件,但是……只需要求非递减就可以AC……数据好弱…… 虽然还没想明白为什么,但是应该觉得应该是这样——求非递减用大 ...