Vue 中 $attrs 的使用
名词解释：
$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 的使用的更多相关文章
- vue踩坑记录:[Vue warn]: $attrs is readonly.
今天在用element-ui的DatePicker日期选择器的时候,发现每当点击一次这个组件,控制台就会报警告`[Vue warn]: $attrs is readonly`,但是也不影响实际操作效果 ...
- 【vue】[Vue warn]: $attrs is readonly. 只读
[Vue warn]: $attrs is readonly. 这个问题出现时,我自己都很懵逼,明明是在 data 内声明了一个 state ,我在页面渲染完成后去改变它,但是一改变就报错,而且是我 ...
- vue中$attrs和$listeners以及inheritAttrs的用法
官方文档说明: 一.解释:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外). 意思就是父组件往子组件传没有在props里声明过的值时,子组件可以通 ...
- 【vue】$attrs的作用和使用方法
之前一直不了解$attrs的作用和使用场景,然后自己翻阅了相关资料整理了下,如有不对的地方请大家指教 $attrs: $attrs是vue版本2.40以上新增的属性: 使用场景: vue项目里面,大家 ...
- 怎么在vue中使用less
最近使用vue2.0重构项目, 使用vue-cli脚手架构建, 采用webpack模板, 要在项目中使用less进行样式的编写 首先, 打开终端, 在当前项目目录下安装less npm install ...
- Vue中的$set的使用
在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新 ...
- mockjs在vue中的使用
mockjs在vue中的使用 安装好vue-cli后 加载模块: npm install mockjs 创建mock.js文件到src目录下的任一合适文件内新建mockjs.js,设置好拦截信息,设置 ...
- Vue.Draggable/SortableJS 的排序功能，在VUE中的使用
此插件git: https://github.com/SortableJS/Vue.Draggable 基于Sortable.js http://www.cnblogs.com/xiangsj/p/6 ...
- mescroll在vue中的应用
1.npm install --save mescroll.js 2. <template> <div> <!--全部--> <mescroll-vue re ...
随机推荐
- luogu p4141 消失之物（背包dp+容斥原理）
题目传送门 昨天晚上学长讲了这题,说是什么线段树分治,然后觉得不可做,但那还不是正解,然后感觉好像好难的样子. 由于什么鬼畜的分治不会好打,然后想了一下$O(nm)$的做法,想了好长时间觉得这题好像很 ...
- Python基础之Python语言类型
编程语言主要从以下几个角度进行分类: 编译型和解释型 静态语言和动态语言 强类型定义语言和弱类型定义语言 编译和解释的区别是什么? 编译器把源程序的每一条语句都编译成机器语言,并保存成二进制文件,这样 ...
- Composer 安装 zlib_decode(): data error 错误
1.composer 安装一个组件(composer require topthink/think-worker) 报错如下 Failed to decode response: zlib_decod ...
- MySQL_(Java)使用JDBC创建用户名和密码校验查询方法
MySQL_(Java)使用JDBC向数据库发起查询请求 传送门 MySQL数据库中的数据,数据库名garysql,表名garytb,数据库中存在的用户表 通过JDBC对MySQL中的数据用户名和密码 ...
- Centos-Redhat下远程桌面的方法 & Redhat改Centos源
折腾了好几天才搞定,Redhat下远程桌面的方法,首先保证本身已经装了桌面,并且可以ssh访问 由于系统中自带python2环境,装了anaconda以及它带的python3环境,这个必须存在(前提) ...
- win10专业版安装docker实战
在win10专业版上安装docker 一,下载Docker for Windows Installer.exe 二,在程序面板---程序----程序和功能中找到启动或关闭windows功能,将hype ...
- TCP窗口扩大选项Window Scale
窗口扩大选项使TCP的窗口定义从16bit增加到32bit.这并不是通过修改TCP首部来实现的,TCP首部仍然使用16bit,而是通过定义一个选项实现对16bit的扩大操作来完成的.于是TCP在内部将 ...
- State Threads之co-routine的创建和stack的管理
1. 综述 协程库 State Threads Library 是一个基于 setjmp/longjmp 实现的 C 语言版用户线程库或协程库(user level thread). 基本协程例子: ...
- 关于colab的一些技巧
1.指定工作文件夹(运行可以相对路径!) # 指定当前的工作文件夹 import os # 此处为google drive中的文件路径,drive为之前指定的工作根目录,要加上 os.chdir(&q ...
- ajax 下载文件
原本现在文件直接通过超链接可以完成下载,但现在要在url中附带几个参数,并且这些参数要是点击事件触发时的最新值,所以这里使用ajax的方式进行下载 然而: 1.使用ajax,ajax的返回值类型是js ...