一、vue中，默认情况下，调用组件时，传入一些没有在props中定义的属性，会把这些“非法”属性渲染在组件的根元素上（有一些属性除外），而这些“非法”的属性会记录在$attrs属性上。

二、如何控制不把这些非法的属性渲染在组件的根元素上呢？答案是在组件内部设置inheritAttrs:false即可。

三、通过v-bind="$attrs"可以把“非法”的属性渲染到指定的组件某个元素上。

四、如下图

vue中的$attrs属性和inheritAttrs属性的更多相关文章

  1. vue中关于v-for性能优化---track-by属性

    vue中关于v-for性能优化---track-by属性 最近看了一些react,angular,Vue三者的对比文章,对比来说Vue比较突出的是轻量级与易上手. 对比Vue与angular,Vue有 ...

  2. vue中书写JSX一些坑-特殊属性名

    举例说明, T1和T2引用Sub时, key2会出现在props以及data.attrs中, 而key则在data中 const Sub = ({data, props}) => { conso ...

  3. Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别

    1.computed和methods 共同点:computed能现实的methods也能实现: 不同点:computed是基于它的依赖进行缓存的.computed只有在它的相关依赖发生变化才会重新计算 ...

  4. vue 中contenteditable="true"添加可编辑属性后v-model双向绑定失效的解决办法

    在项目中会遇到需要编辑单元格的双向绑定问题,v-model双向绑定会在添加contenteditable="true"属性后失效解决方法如下,亲测好用(v-html和@blur实现 ...

  5. 为什么vue中的v-bind用在class属性上有点怪？

    如图所见,普通的标签属性我们直接使用 :属性名=`props的值` 就可以了.为什么用到class里要加[ ] 这个???

  6. Vue.js-05：第五章 - 计算属性与监听器

    一.前言 在 Vue 中,我们可以很方便的将数据使用插值表达式( Mustache 语法)的方式渲染到页面元素中,但是插值表达式的设计初衷是用于简单运算,即我们不应该对差值做过多的操作.当我们需要对差 ...

  7. 总结vue中父向子，子向父以及兄弟之间通信的几种方式

    子向父方式1:通过props,如例子中子组件test1.vue向父组件App.vue传值 App.vue代码 <template> <div id="app"&g ...

  8. 深入理解 vue 中 scoped 样式作用域的规则

    哈喽!大家好!我是木瓜太香,今天我们来聊一个 vue 的样式作用域的问题,通常我们开发项目的时候是要在 style 上加上 scoped 来起到规定组件作用域的效果的,所以了解他们的规则也是很有必要的 ...

  9. 详解Vue中的computed和watch

    作者:小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.cn/user/2436173500265335 1. 前言 作为一名Vue ...

随机推荐

  1. hash 算法

    Hash,一般翻译做“散列”,也有直接音译为“哈希”的,就是把任意长度的输入(又叫做预映射, pre-image),通过散列算法,变换成固定长度的输出,该输出就是散列值.这种转换是一种压缩映射,也就是 ...

  2. 利用 BackgroundService 固定时间间隔执行某动作

    继承 BackgroundService 类: 为什么会写这个东西呢?本人在写消息队列的时候思考过一个问题——比如,每5秒从队列里面取一条消息(一条消息里面又包含了1000条数据),要把这1000条数 ...

  3. Vue.config.productionTip = false 是什麽意思

    阻止启动生产消息,常用作指令. 阻止启动生产消息 這又是什麽意思? 看下效果 Vue.config.productionTip = false Vue.config.productionTip = t ...

  4. 跑shell脚本出错问题以及解决。

    脚本信息: #!/bin/bash function hello(){ cat <<YJT echo "hello world!!!" YJT } hello 错误: ...

  5. hadoop(1)---hadoop的介绍和几种模式。

    一.什么是hadoop? Hadoop软件库是一个开源框架,允许使用简单的编程模型跨计算机集群分布式处理大型数据集.它旨在从单个服务器扩展到数千台计算机,每台计算机都提供本地计算和存储.库本身不是依靠 ...

  6. 使用 Nexus3 Repository Manager 搭建 npm 私服

    公司里一般都有自己的私服,用于管理封装的工具插件等,Nexus2主要是用于maven/gralde仓库的统一管理,Nexus3则添加了npm插件,可以对npm提供支持,其实用于npm仓库管理的还有一个 ...

  7. Spring boot 集成Solr

    首先安装Solr 集成 ikanalyzer ,可以参考 https://www.cnblogs.com/lick468/p/10867492.html https://www.cnblogs.com ...

  8. Matlab图像处理——中值滤波medfilt2问题解决

    本文链接:https://blog.csdn.net/Pxzly1117/article/details/79201772程序: I=imread('13.jpg');%读入图像imshow(I);h ...

  9. SQL优化 | 避免全表扫描

    1． 对返回的行无任何限定条件,即没有where 子句 2． 未对数据表与任何索引主列相对应的行限定条件 例如:在City-State-Zip列创建了三列复合索引,那么仅对State列限定条件不能使用 ...

  10. 到达型01背包---P1877 [HAOI2012]音量调节

    P1877 [HAOI2012]音量调节 题解 solution 1 普通dfs  60pt dfs 暴搜,pos 记录当前到了第几首歌,level 记录当前的音量 一个小剪枝 由于每换一首歌都要调节 ...