今天在使用$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. ubuntu 16.04 配置ssl

    Let's Encrypt 的服务相信很多人都知道了,我个人认为这是最好的免费 SSL 服务.下面内容即使如何在自己的网站上使用 Let's Encrypt 实现 SSL. 前提条件 自己拥有一个域名 ...

  2. python学习中

    python中的单引号.双引号.三引号的用法 网上也查找了资料,理解的都有些费劲 就自己验证了一下(主要是目前掌握的python知识,不知道什么时候会同时用到这三种引号) 用python3验证的 单引 ...

  3. 算法之美&数据结构与算法复习

    1.归并两个有序链表(归并排序) 2.最小路径和--BP解法 3.计算int sqrt(x)--二分解法 4.趣味面试题 5.跳步游戏(Jump_Game)--后向回溯算法 6.Excel列号转十进制 ...

  4. Matlab与C++混合编程 2--在C++中使用Matlab固有命令

    直接在Visual Studio中运行Matlab固有命令 #include <iostream> #include"engine.h" // 添加matlab引擎库的 ...

  5. 应用安全 - 无文件式攻击 - 潜伏型攻击 - WMI - 汇总

    wbemtest.exe Windows XP Windows 10

  6. 从零构建vue项目(三)--vue常用插件

    一.直接拉取的模板中,package.json如下: { "name": "vuecli2-test", "version": " ...

  7. 记一次有趣的JsonFormat不生效问题

    dto中使用了JsonFormat注解,如图 然后再序列化时 objectMapper.writeValueAsString(printReceBillVO) 始终值是一个Long,最后发现是包引用错 ...

  8. Java 5种单例模式

    /*单例模式: 指某个类中只能存在一个对象实例,并且该类中只提供一个取得其对象实例的方法 优点:减少系统性能开销 应用场景:网站的计数器,任务管理器,回收站等*/   //单例模式1 -- 静态内部类 ...

  9. C++中构造函数的手动和自动调用方式

    1,对象的构造通过构造函数来完成,和类名相同且没有返回值,这个时候只有参   数一个特性,构造函数可以自定义参数,这个参数一般而言就是对类进行初始  化来使用的:带有参数的构造函数的意义在于可以使得每 ...

  10. GmSSL Build with VS2017

    使用背景: 最近研究GB35114, 有关于sip协议部分,exosip的已经编译过,由于gb3511中采用的是国密算法,因此这里记录一下GMSSL在windows下的编译过程以及遇到的错误 详细GM ...