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 ...
随机推荐
- charles抓包教程
百度搜索下载charles 默认安装即可完成 1.双击charles.exe启动,我的是4.2.7版本.最好下载原版的不要去破解中文,会有不兼容 1.搜索该软件许可证书并输入即可长期使用 2.设置代理 ...
- 【MM系列】SAP 物料进销存报表查看
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]在SAP里查看数据的方法 前言部 ...
- LAMP框架
一基本常识 LNMP (Linux + Nginx + MySQL + PHP) LAMP (Linux + Apache + MySQL + PHP) //php作为Apache的模块Apache. ...
- android app开发中的常用组件
1 Activity 1.1 Activity的启动 第一,android manifest中指定的主activity,点击app的icon启动进入. 第二,使用intent,在另外一个activit ...
- [转帖]kafka基础知识点总结
kafka基础知识点总结 https://blog.csdn.net/qq_25445087/article/details/80270790 需要学习. 1.kafka简介 kafka是由Apach ...
- Quartz任务调度的测试Demo1(含有配置文件的demo)
Quartz是一个作业任务调度的框架,所在项目组中“消息推送模块”使用到此框架,于是写个demo熟悉下quart的用法: 使用Spring框架来集成Quartz的任务调度任务. 1.搭建Spring框 ...
- SparkStreaming DStream转换
1.无状态转换操作 (1)无状态转化操作就是把简单的RDD转化操作应用到每个批次上,也就是转换DStream中的每一个RDD. 部分无状态转化操作: (2)尽管这些函数韩起来像作用在整个流上一样,但事 ...
- c++多线程并发学习笔记(2)
等待一个时间或其他条件 在一个线程等待完成任务时,会有很多选择: 1. 它可以持续的检查共享数据标志(用于做保护工作的互斥量),直到另一个线程完成工作时对这个标志进行重设.缺点:资源浪费,开销大 2. ...
- c++ Oracle OCCI 编程
转载备忘:http://blog.sina.com.cn/s/blog_53a72add01015zj4.html 关于occi编程可以参考的链接: http://blog.itpub.net/162 ...
- Django使用Celery进行异步任务
Celery Celery是一个功能完备即插即用的异步任务队列系统.它适用于异步处理问题,当发送邮件.或者文件上传, 图像处理等等一些比较耗时的操作,我们可将其异步执行,这样用户不需要等待很久,提高用 ...