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 ...
随机推荐
- ubuntu 16.04 配置ssl
Let's Encrypt 的服务相信很多人都知道了,我个人认为这是最好的免费 SSL 服务.下面内容即使如何在自己的网站上使用 Let's Encrypt 实现 SSL. 前提条件 自己拥有一个域名 ...
- python学习中
python中的单引号.双引号.三引号的用法 网上也查找了资料,理解的都有些费劲 就自己验证了一下(主要是目前掌握的python知识,不知道什么时候会同时用到这三种引号) 用python3验证的 单引 ...
- 算法之美&数据结构与算法复习
1.归并两个有序链表(归并排序) 2.最小路径和--BP解法 3.计算int sqrt(x)--二分解法 4.趣味面试题 5.跳步游戏(Jump_Game)--后向回溯算法 6.Excel列号转十进制 ...
- Matlab与C++混合编程 2--在C++中使用Matlab固有命令
直接在Visual Studio中运行Matlab固有命令 #include <iostream> #include"engine.h" // 添加matlab引擎库的 ...
- 应用安全 - 无文件式攻击 - 潜伏型攻击 - WMI - 汇总
wbemtest.exe Windows XP Windows 10
- 从零构建vue项目(三)--vue常用插件
一.直接拉取的模板中,package.json如下: { "name": "vuecli2-test", "version": " ...
- 记一次有趣的JsonFormat不生效问题
dto中使用了JsonFormat注解,如图 然后再序列化时 objectMapper.writeValueAsString(printReceBillVO) 始终值是一个Long,最后发现是包引用错 ...
- Java 5种单例模式
/*单例模式: 指某个类中只能存在一个对象实例,并且该类中只提供一个取得其对象实例的方法 优点:减少系统性能开销 应用场景:网站的计数器,任务管理器,回收站等*/ //单例模式1 -- 静态内部类 ...
- C++中构造函数的手动和自动调用方式
1,对象的构造通过构造函数来完成,和类名相同且没有返回值,这个时候只有参 数一个特性,构造函数可以自定义参数,这个参数一般而言就是对类进行初始 化来使用的:带有参数的构造函数的意义在于可以使得每 ...
- GmSSL Build with VS2017
使用背景: 最近研究GB35114, 有关于sip协议部分,exosip的已经编译过,由于gb3511中采用的是国密算法,因此这里记录一下GMSSL在windows下的编译过程以及遇到的错误 详细GM ...