一、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. oom killer 详解

    一.oom killer理解和日志分析:知识储备 oom killer日志分析,这是前篇,准备一些基础知识 带着问题看: 1.什么是oom killer 是Linux内核设计的一种机制,在内存不足的时 ...

  2. ckeditor复制粘贴word

    从word文档中直接粘贴到ckeditor编辑区,查看的时候格式会显示混乱,非常难看.解决方法:   CKEDITOR.cleanWord = function(h, i) { return h; i ...

  3. Codevs 1227 方格取数 2(费用流)

    1227 方格取数 2 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 查看运行结果 题目描述 Description 给出一个n*n的矩阵,每一格有一个非负整数 ...

  4. linux查看系统启动时间

    1.uptime命令 felix@felix-computer:~$ uptime :: up :, user, load average: 0.89, 0.74, 1.00 felix@felix- ...

  5. testdisk修复磁盘文件

    使用testdisk,分析之后,使用:P ,list文件,然后使用如下方法恢复文件 Use Right to change directory, h to hide Alternate Data St ...

  6. 安装cartographer遇到Unrecognized syntax identifier "proto3". This parser only recognizes "proto2"问题

    https://stackoverflow.com/questions/38605734/mac-cannot-find-eigen3 https://blog.csdn.net/qq_4214518 ...

  7. dp之斜率优化

    前几天想练练思维,所以从cf上随便找了一道dp题,看完题意后第一感觉很简单,就是简单的区间dp题,但是看到数据范围的我顿时就懵了,(1≤n≤105) emmmmmmmm,按照普通的思路肯定会超时的.. ...

  8. java权限管理与用户角色权限设计

    java权限管理与用户角色权限设计 实现业务系统中的用户权限管理 B/S系统中的权限比C/S中的更显的重要,C/S系统因为具有特殊的客户端,所以访问用户的权限检测可以通过客户端实现或通过客户端+服务器 ...

  9. Django 测试开发3 数据模型models和admin管理工具

    参考:https://blog.csdn.net/weixin_44510615/article/details/89425412 1.Django模型字段常用类型: IntegerField : 整 ...

  10. Git<一> 手工编辑冲突

    一:背景 Neo君之前在写东西时,都是自己负责各自的模块,没有出现代码拉下来冲突的情况.最近Neo君在搞一搞前端的东东,跟同事功能有些冲突,所以就难免会冲突. 所以简单总结下,这次针对的情况是不同的用 ...