名词解释：

$attrs--继承所有的父组件属性（除了prop传递的属性、class 和 style ）

inheritAttrs：默认值true,继承所有的父组件属性（除props的特定绑定）作为普通的HTML特性应用在子组件的根元素上，如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承

主要用途

用在父组件传递数据给子组件或者孙组件

<body>

<div id="app" class="demo">
<base-input label="姓名" class="username-input" placeholder="Enter your username" data-date-picker="activated"></base-input>
</div>
<script src="js/vue-2.5.13.js"></script>
<script>
Vue.component("base-input", {
inheritAttrs: false, //此处设置禁用继承特性
props: ["label"],
template:
'<label>' //这里的label元素 因为inheritAttrs: false，所以无法从<base-input>元素中继承placeholder， data-date-picker属性，但是class属性会继承
+' {{label}}'
+' {{$attrs.placeholder}}'
+' {{$attrs["data-date-picker"]}}'
+' <input v-bind="$attrs"/>'  //<base-input>元素中，除了class,label(proprs中已经有了)外，剩下placeholder  和 data-date-picker的属性以及属性值全部继承过来了
+' </label>'
,
mounted: function() {
console.log(this.$attrs);
}
})
const app = new Vue({
el: '#app',
data: {

}

});

</script>

</body>

渲染出来的结果：

<label class="username-input">
姓名
Enter your username
activated
<input placeholder="Enter your username" data-date-picker="activated">
</label>

如果把上面例子中的inheritAttrs: false去掉或者改为inheritAttrs: true，最终渲染为：

<label placeholder="Enter your username" data-date-picker="activated" class="username-input">
姓名
Enter your username
activated
<input placeholder="Enter your username" data-date-picker="activated">
</label>

Vue 中 $attrs 的使用的更多相关文章

  1. vue踩坑记录:[Vue warn]: $attrs is readonly.

    今天在用element-ui的DatePicker日期选择器的时候,发现每当点击一次这个组件,控制台就会报警告`[Vue warn]: $attrs is readonly`,但是也不影响实际操作效果 ...

  2. 【vue】[Vue warn]: $attrs is readonly. 只读

    [Vue warn]: $attrs is readonly. 这个问题出现时,我自己都很懵逼,明明是在 data 内声明了一个 state  ,我在页面渲染完成后去改变它,但是一改变就报错,而且是我 ...

  3. vue中$attrs和$listeners以及inheritAttrs的用法

    官方文档说明: 一.解释:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外). 意思就是父组件往子组件传没有在props里声明过的值时,子组件可以通 ...

  4. 【vue】$attrs的作用和使用方法

    之前一直不了解$attrs的作用和使用场景,然后自己翻阅了相关资料整理了下,如有不对的地方请大家指教 $attrs: $attrs是vue版本2.40以上新增的属性: 使用场景: vue项目里面,大家 ...

  5. 怎么在vue中使用less

    最近使用vue2.0重构项目, 使用vue-cli脚手架构建, 采用webpack模板, 要在项目中使用less进行样式的编写 首先, 打开终端, 在当前项目目录下安装less npm install ...

  6. Vue中的$set的使用

    在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新 ...

  7. mockjs在vue中的使用

    mockjs在vue中的使用 安装好vue-cli后 加载模块: npm install mockjs 创建mock.js文件到src目录下的任一合适文件内新建mockjs.js,设置好拦截信息,设置 ...

  8. Vue.Draggable/SortableJS 的排序功能，在VUE中的使用

    此插件git: https://github.com/SortableJS/Vue.Draggable 基于Sortable.js http://www.cnblogs.com/xiangsj/p/6 ...

  9. mescroll在vue中的应用

    1.npm install --save mescroll.js 2. <template> <div> <!--全部--> <mescroll-vue re ...

随机推荐

  1. HGOI 20190830 题解

    Problem A 钥匙 有$n$个人和$m$个钥匙在数轴上,人的坐标为$a_i$,钥匙的坐标为$b_i$ 而门的坐标为$p$,要让所有人获得一把不同钥匙,并且到达门,最长时间最短是多少. 对于$10 ...

  2. noi.ac NOI挑战营模拟赛1-5

    注:因为博主是个每次考试都爆零垫底的菜鸡,所以此篇博客很有可能咕咕咕 (指只贴AC代码不写题解的......如果我真的不会做的话,就不能怪我了qwqwq) Day1 T1 swap 23pts 从一个 ...

  3. TensorFlow使用记录 (九）： 模型保存与恢复

    模型文件 tensorflow 训练保存的模型注意包含两个部分:网络结构和参数值. .meta .meta 文件以 “protocol buffer”格式保存了整个模型的结构图,模型上定义的操作等信息 ...

  4. 使用matplotlib绘制常用图表(2)-常用图标设置

    一.使用subplots绘制子图 import numpy as np from matplotlib import pyplot as plt %matplotlib inline x = np.a ...

  5. JavaWeb_(Hibernate框架)Hibernate中一级缓存

    Hibernate中一级缓存 Hibernate 中的缓存分为一级缓存和二级缓存,这两个级别的缓存都位于持久化层,并且存储的都是数据库数据的备份.其中一级缓存是 Hibernate 的内置缓存,在前面 ...

  6. [清华集训2016]石家庄的工人阶级队伍比较坚强——三进制FWT

    题目链接: [清华集训2016]石家庄的工人阶级队伍比较坚强 题目大意:有$n=3^m$个人玩石头剪刀布,共$t$轮游戏,每轮每个人要和包括自己的所有人各进行$m$次石头剪刀布.每个人在$m$轮中的决 ...

  7. 3.开始使用Spring Cloud实战微服务

                     开始使用Spring Cloud实战微服务 3.1. Spring Cloud实战前提 3.1.1. 需要的技术储备 语言方面:可以使用Java.scala.Groo ...

  8. django xadmin安装

    安装方式一: 下载xadmin源码文件,下载之后,解压缩,将解压目录中的xadmin文件夹拷贝到项目项目文件中.下载地址:https://codeload.github.com/sshwsfc/xad ...

  9. python3笔记二十四：Mysql数据库操作命令

    一:学习内容 Mysql操作命令:启动服务.停止服务.连接数据库.退出数据库.查看版本.显示当前时间.远程连接 数据库操作命令:创建数据库.删除数据库.切换数据库.查看当前选择的数据库 表操作命令:查 ...

  10. Python将函数放入模块

    函数可以将通用的代码封装起来,便于其他程序或者方法调用.将函数存放在文件中,这个文件被称为模块.将函数存储在独立的模块中,可与其他程序员共享这些文件而不是整个程序. fun.py def say_hi ...