今天在使用$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. 【Hibernate】---Query、Criteria、SQLQuery

    一.核心配置文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibernate-con ...

  2. c# 排列组合代码类

    /// <summary> /// 排列组件算法类 /// </summary> /// <typeparam name="T"></ty ...

  3. ARTS-0

    ARTS的初衷 Algorithm:主要是为了编程训练和学习.每周至少做一个 leetcode 的算法题(先从Easy开始,然后再Medium,最后才Hard).进行编程训练,如果不训练你看再多的算法 ...

  4. centos7：Kafka集群安装

    解压文件到安装目录 tar -zxvf kafka_2.10-0.10.2.1.tgz 1.进入目录 cd kafka_2.10-0.10.2.1 mkdir logs cd config cp se ...

  5. Intellij Idea使用教程汇总篇

    Java编程强大的工具IDEA使用教程及一些快捷键收藏如下: https://blog.csdn.net/fanrenxiang/article/details/80503490

  6. 匿名函数及paramiko模块

    1.匿名函数 随着程序代码的不断增加,起名字其实也是非常困难的一件事 一些简单的功能完全没必要用def函数,匿名函数足矣 def test(x,y): return x+y res = test(1, ...

  7. 15.永恒之蓝exp----

    永恒之蓝exp 2017年,影响于全世界 SMB ripid7官网获取ms17-010的exp信息 Rapid7: https://www.rapid7.com/db/modules/exploit/ ...

  8. 【Linux开发】Ubuntu图形界面切换与磁盘扩展分区

    Ubuntu14.04设置字符界面快捷键:ctrl-alt-f1 切换回图形界面:ctrl-alt-f7 为虚拟机拓展了30G的空间,挂在了/mnt/sda3这个目录下: 说明一下Ubuntu14.0 ...

  9. [转帖]深入理解 MySQL—锁、事务与并发控制

    深入理解 MySQL—锁.事务与并发控制 http://www.itpub.net/2019/04/28/1723/ 跟oracle也类似 其实所有的数据库都有相同的机制.. 学习了机制才能够更好的工 ...

  10. 只使用非递归的mutex

    mutex分为递归(以下简写为rm)和非递归(以下简写为nrm)两种,它们的唯一区别在于:同一个线程可以重复对rm加锁,但是不能重复对nrm加锁. 虽然rm使用起来要更加方便一些,并且不用考虑一个线程 ...