今天在使用$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. 理解ES6中的Symbol

    一.为什么ES6引入Symbol 有时候我们在项目开发的过程中可能会遇到这样的问题,我写了一个对象,而另外的同时则在这个对象里面添加了一个属性或是方法,倘若添加的这个属性或是方法是原本的对象中本来就有 ...

  2. 打印一个浮点数组,会输出字符串"Hello, world“ & 浮点数的二进制表示(IEEE 754标准)

    #include <stdio.h> #include<stdlib.h> int main() { float a[3] = { 1143139122437582505939 ...

  3. 【转载】PHP中foreach的用法

    http://www.php.cn/php-weizijiaocheng-399438.html 很好用的PHP中foreach的用法详解,收藏!

  4. Html5 Canvas斗地主游戏

    过完年来公司,没什么事,主管说研究下html5 游戏,然后主管就给了一个斗地主的demo,随后我就开始看代码, 现在我看了html5以及canvas相关知识和斗地主的demo后,自己用demo上的素材 ...

  5. 针对WordPress站点思路

    一.使用WPscan 1).简介 WPScan是一个扫描 WordPress 漏洞的黑盒子扫描器,它可以为所有 Web 开发人员扫描 WordPress 漏洞并在他们开发前找到并解决问题.我们还使用了 ...

  6. unsigned char bcd串乱码问题解决

    unsigned char bcd[13]; ...... string bcdstr; for(int i=0;i < 12;i++) { bcdstr=FormatString(" ...

  7. <<用法

    数据移位运算符,左移几位,如:x=i<<4;就是将i的值左移4位(放大2的4次方)后,赋给x,若i=2,则X=32.

  8. [BZOJ 4668]冷战(带边权并查集+启发式合并)

    [BZOJ 4668]冷战(并查集+启发式合并) 题面 一开始有n个点,动态加边,同时查询u,v最早什么时候联通.强制在线 分析 用并查集维护连通性,每个点x还要另外记录tim[x],表示x什么时间与 ...

  9. 计算视图相对坐标时convertPoint:toView: ,UIApplication sharedApplication - keyWindow is nil?

    UIWindow *window = [UIApplication sharedApplication].keyWindow; window 为nil的原因:在指定rootViewController ...

  10. 算法学习之选择排序算法的python实现

    ——参考自<算法图解> def findSmallest(arr): # 假设第一个元素最小 smallest = arr[0] smallest_index = 0 for i in r ...