vue多层传递$attrs
今天在使用$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的更多相关文章
- 【Vue】中 $attrs 中的使用方法
vue官网是这样介绍的: 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外).当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 ( ...
- vue inheritAttrs、$attrs和$listeners使用
inheritAttrs.$attrs和$listeners使用场景: 组件传值,尤其是祖孙组件有跨度的传值. (1)inheritAttrs 属性说明:https://cn.vuejs.org/v2 ...
- vue 组件传值$attrs $listeners $bus provide/inject $parent/$children
$attrs 包含了父作用域中不作为prop被识别的特性绑定,当一个组件没有声明props时,这里会包含所有父作用域的绑定, $listeneers 包含了父作用域中的v-on事件监听器,它可以通过v ...
- vue中的$attrs属性和inheritAttrs属性
一.vue中,默认情况下,调用组件时,传入一些没有在props中定义的属性,会把这些“非法”属性渲染在组件的根元素上(有一些属性除外),而这些“非法”的属性会记录在$attrs属性上. 二.如何控制不 ...
- 组件-vue自定义方法传递
组件样式 面包屑导航栏 js Vue.component('bannerOne', { created() { console.log(this.bigbackColor); }, props: { ...
- vue 多层组件相互嵌套的时候 数据源更新 dom没更新 彻底清除组件缓存
当项目中存在多层组件相互嵌套 组件存在严重缓存时 this.$nextTick(() => { ..... }); 不管用 this.$forceUpdate(); 不管用 只能通过深拷贝浅拷 ...
- vue 听说你很会传值?
前置 大小 vue 项目都离不开组件通讯, 在这里总结一下vue组件通讯方式并列出, 都是简单的例子. 适合像我这样的小白.如有错误,欢迎指正. 温馨提示: 下文没有列出 vuex, vuex 也是重 ...
- js 整理 前端知识点 前端面试题 (2020)(vue)
数据类型 字符串(String).数字(Number).布尔(Boolean).对空(Null).未定义(Undefined).Symbol. 引用数据类型:对象(Object).数组(Array). ...
- vue组件之间通信总结(超详细)
组件通信在我们平时开发过程中,特别是在vue和在react中,有着举足轻重的地位.本篇将总结在vue中,组件之间通信的几种方式: props.$emit $parent.$children $attr ...
随机推荐
- python每日一练:0015题
第 0015 题: 纯文本文件 city.txt为城市信息, 里面的内容(包括花括号)如下所示: { "1" : "上海", "2" : & ...
- (一)VS2015下配置OpenGL
刚开始用OpenGL,一开始不太明白配置库的原理,在VS2015下耗费了大量时间.这里将配置过程做个笔记,以供日后查看.配置过程中,需要下载cmake构建工具以及glew和glfw库. 下载地址为: ...
- Mongodb-安全配置优化
1.MongoDB配置文件样例 # mongod.conf, Percona Server for MongoDB # for documentation of all options, see: # ...
- Mysql常用时间函数的用法和应用
/* ---1)整型时间戳转换为date的格式(yyyymmdd, yyyy年mm月dd)--*/ , '%Y%m%d' ); -- 20090806 , '%Y年%m月%d' ); -- 2009年 ...
- java基础语法详细介绍
一.概述 1.java语言概述 是SUN(Stanford University Network,斯坦福大学网络公司 ) 1995年推出的一门高级编程语言; java之父---James Goslin ...
- Aliyun-Centos 7 LNMP安装(最新版LNMP)
linux装软件方式:1.源码安装:下载wget-->解压tar -zxvf -->配置 ./configure --->编译make -->安装 make install 2 ...
- mybatis oracle 批量新增
假定场景:批量导入用户信息 一般批量新增使用 SELECT … INSERT INTO 和 INSERT INTO … SELECT 我们这次使用第二种 一.先建一张用户信息表模拟批量导入用户信息 c ...
- MySQL explain,type分析(转)
问题:explain结果中的type字段代表什么意思? MySQL的官网解释非常简洁,只用了3个单词:连接类型(the join type).它描述了找到所需数据使用的扫描方式. 最为常见的扫描方式有 ...
- 使用filebeat收集不同用应用的日志传输到redis,并加以区分
附加技巧 步骤流程: 使用filebeat收集一台主机上两个不同应用的日志,传递给redis,然后logstash从redis中拉去数据传递给elasticsearch 1.filebeat.yml文 ...
- [项目实战]训练retinanet(pytorch版)
采用github上star比较高的一个开源实现https://github.com/yhenon/pytorch-retinanet 在anaconda中新建了一个环境,因为一开始并没有新建环境,在原 ...