一、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. 脚本put数据到hdfs

    1.vim putdata.sh 脚本功能: 每小时的第15分钟把上一小时的数据put到hdfs相应目录 为了避免大量的小文件,我们把文件夹下的文件cat到一个临时文件里,put成功后删除这个临时文件 ...

  2. 【.Net设计模式系列】仓储(Repository)模式 ( 一 )

    开篇 2016新年伊始,望眼过去,不知不觉在博客园已经注册8个月啦,由于最近忙于工作,博客迟迟没有更新.直到最近一直研究.Net设计模式,对一些模式有所感悟,故拿出自己的心得与大家分享,在接下来的所有 ...

  3. simcom7600ce-t LBS function

    Welcome to minicom 2.7 OPTIONS: I18n Compiled on Nov 15 2018, 20:20:38.Port /dev/ttyUSB2, 00:55:23 P ...

  4. 对深层嵌套对象进行取值&赋值

    需求如下: let obj = { foo: { bar: { name: 'biz' } } }; // 输出 'biz' this.getObj(obj, 'foo.bar.name'); obj ...

  5. splay 1296 营业额统计

    有一个点超时,确实是个很简单的splay#include<cstdio> #include<iostream> using namespace std; int n,shu[1 ...

  6. Tkinter 之MessageBox弹出框

    一.参数说明 语法 作用 截图 tk.messagebox.showwarning(title='提示', message='你确定要删除吗?') 警告信息弹窗   tk.messagebox.sho ...

  7. meshing-球体网格划分

    原视频下载地址:https://yunpan.cn/cqwvgQQ2xy3G6  访问密码 a54b

  8. JVM的内存配置参数

    JVM的结构问题:JVM分两块:PermanentSapce和HeapSpace, HeapSpace = [old + new{=Eden,from,to}] PermantSpace主要负责存放加 ...

  9. 【零基础】使用Tensorflow实现神经网络

    一.序言 前面已经逐步从单神经元慢慢“爬”到了神经网络并把常见的优化都逐个解析了,再往前走就是一些实际应用问题,所以在开始实际应用之前还得把“框架”翻出来,因为后面要做的工作需要我们将精力集中在业务而 ...

  10. sonar,jiar,xray,jenkins[cli] [sudoers]

    curl -n -X POST http://52.83.39.59:8080'/job/CLA_SSO/buildWithParameters?token=11d710a8eac8012bea28b ...