今天在使用$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. charles抓包教程

    百度搜索下载charles 默认安装即可完成 1.双击charles.exe启动,我的是4.2.7版本.最好下载原版的不要去破解中文,会有不兼容 1.搜索该软件许可证书并输入即可长期使用 2.设置代理 ...

  2. 【MM系列】SAP 物料进销存报表查看

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]在SAP里查看数据的方法   前言部 ...

  3. LAMP框架

    一基本常识 LNMP (Linux + Nginx + MySQL + PHP) LAMP (Linux + Apache + MySQL + PHP) //php作为Apache的模块Apache. ...

  4. android app开发中的常用组件

    1 Activity 1.1 Activity的启动 第一,android manifest中指定的主activity,点击app的icon启动进入. 第二,使用intent,在另外一个activit ...

  5. [转帖]kafka基础知识点总结

    kafka基础知识点总结 https://blog.csdn.net/qq_25445087/article/details/80270790 需要学习. 1.kafka简介 kafka是由Apach ...

  6. Quartz任务调度的测试Demo1(含有配置文件的demo)

    Quartz是一个作业任务调度的框架,所在项目组中“消息推送模块”使用到此框架,于是写个demo熟悉下quart的用法: 使用Spring框架来集成Quartz的任务调度任务. 1.搭建Spring框 ...

  7. SparkStreaming DStream转换

    1.无状态转换操作 (1)无状态转化操作就是把简单的RDD转化操作应用到每个批次上,也就是转换DStream中的每一个RDD. 部分无状态转化操作: (2)尽管这些函数韩起来像作用在整个流上一样,但事 ...

  8. c++多线程并发学习笔记(2)

    等待一个时间或其他条件 在一个线程等待完成任务时,会有很多选择: 1. 它可以持续的检查共享数据标志(用于做保护工作的互斥量),直到另一个线程完成工作时对这个标志进行重设.缺点:资源浪费,开销大 2. ...

  9. c++ Oracle OCCI 编程

    转载备忘:http://blog.sina.com.cn/s/blog_53a72add01015zj4.html 关于occi编程可以参考的链接: http://blog.itpub.net/162 ...

  10. Django使用Celery进行异步任务

    Celery Celery是一个功能完备即插即用的异步任务队列系统.它适用于异步处理问题,当发送邮件.或者文件上传, 图像处理等等一些比较耗时的操作,我们可将其异步执行,这样用户不需要等待很久,提高用 ...