今天在使用$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. 虚拟化 RemoteApp 远程接入 源码 免费

    远程接入 RemoteApp 虚拟化 源码 免费 1.终端安装与配置: 此远程接入组件的运行原理与瑞友天翼.异速连.CTBS等市面上常见的远程接入产品一样,是透过Windows的终端服务来实现的,速度 ...

  2. 【HANA系列】SAP HANA SQL获取上周的周一

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL获取上周 ...

  3. 关于Unity3D中的SerialField这个Attribute的功能

    首先我们看看效果,以下是源文件的内容: 然后对应的面板: 要注意的地方其实就这里: 可以看出,public默认就可以在面板中进行修改,相应的设为private的isCreateSoldier却不会出现 ...

  4. FacertGrid()的使用

    查看数据的前五行 tips = sns.load_dataset("tips") tips.head() 引入数据,布置横向画布 g = sns.FacetGrid(tips, c ...

  5. 应用安全 - 平台 | 工具 - Nexus漏洞汇总

    CVE-2019-5475 Date: 类型: RCE 影响范围: Nexus Repository Manager OSS <= Nexus Repository Manager Pro &l ...

  6. 分享一个linux系统中循环遍历两个数组内容,并输出数组中的不同内容的shell脚本

    cat diffarray.sh #!/bin/bash arry_list1=(1 2 3 4 5 6 7 8 9) arry_list2=(3 5 8) declare -a diff_list ...

  7. Python内置函数eval

    英文文档: eval(expression, globals=None, locals=None) The arguments are a string and optional globals an ...

  8. CentOS8 下 Redis5.0.7 哨兵Sentinel 模式配置指南

    下载Redis Redis下载链接 解压缩 tar -xzvf redis-5.0.7.tar.gz 编译安装 make和gcc依赖 可通过yum -y install gcc automake au ...

  9. Qt 遍历不规则树的节点

    在使用Qt的GraphicsScene作图时,遇到类似这样的需求:在scene中创建节点类似下图, 现在我要把每个节点的txt保存到xml文件中,结构为 <?xml version='1.0' ...

  10. [LeetCode] 154. 寻找旋转排序数组中的最小值 II

    题目链接 : https://leetcode-cn.com/problems/find-minimum-in-rotated-sorted-array-ii/ 题目描述: 假设按照升序排序的数组在预 ...