一、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. 为什么final类型map和list内容可以修改

    URL地址:https://blog.csdn.net/AlbertFly/article/details/76855367

  2. HashMap，HashTable，ConcurrentHashMap的实现原理及区别

    http://youzhixueyuan.com/concurrenthashmap.html 一.哈希表 哈希表就是一种以 键-值(key-indexed) 存储数据的结构,我们只要输入待查找的值即 ...

  3. 【LOJ #3144】「APIO 2019」奇怪装置

    题意: 定义将一个\(t\)如下转换成一个二元组: \[ f(t) = \begin{cases} x = (t + \left\lfloor \frac{t}{B} \right \rfloor) ...

  4. 1 课务 iOS 概述

    重要注意 紫色解释 蓝色分类 新内容 CS193P 本课老版本 2010 年冬 http://open.163.com/movie/2010/6/C/7/M6RU83DCT_M6RU957C7.htm ...

  5. GitLab安装及备份迁移数据

    centos7安装GitLab 下载相应版本rpm包 https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/ 我此处下载9.3.6版本. # w ...

  6. elasticsearch alias

    索引别名API允许使用一个名字来作为一个索引的别名,所有API会自动将别名转换为实际的索引名称. 别名也可以映射到多个索引,别名不能与索引具有相同的名称.别名可以用来做索引迁移和多个索引的查询统一,还 ...

  7. @AUTORELEASEPOOL

    Swift 在内存管理上使用的是自动引用计数 (ARC) 的一套方法,在 ARC 中虽然不需要手动地调用像是 retain,release 或者是 autorelease 这样的方法来管理引用计数,但 ...

  8. 解析复杂的嵌套数据结构-jsonpath

    JsonPath是一种简单的方法来提取给定JSON文档的部分内容. JsonPath有许多编程语言,如Javascript,Python和PHP,Java. JsonPath提供的json解析非常强大 ...

  9. Spring学习随笔(1)：为什么要使用Spring

    寒冷的冬天,一周两节课,掏出买了一年没翻过的<Spring实战>. 刚刚接触spring的我对它还不是很熟悉,对各种知识的认知也比较浅薄,但我会学习的过程通过随笔记录下来,监督自己学下去. ...

  10. legend3---18、第一阶段代码完成

    legend3---18.第一阶段代码完成 一.总结 一句话总结: 看起来麻烦或者自己因为厌烦不想做的,其实硬着头皮来做,一下子就做完了 1.layer_mobile的loading层和关闭loadi ...