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>
最新文章
- PostgreSQL-pg_dump,pg_restore
- Page Object Model (Selenium, Python)
- 【erlang】erlang几种生成随机数的方法
- C++的ORM工具比较
- MySQL数据丢失情况分析
- 我写了一个java实体类,implements了Serializable接口,然后我如何让serialversionUID自动生成
- WMsg参数常量值
- 用jquery在必填表单字段前加红星总结
- React Native学习-将 &#39;screen&#39;, &#39;window&#39; or a view生成图片
- Qt:QT右键菜单
- Android(java)学习笔记246:ContentProvider使用之学习ContentProvider(内容提供者)的目的
- #AzureChat - 自动伸缩和虚拟机
- 对于笔试题--“good and abc”的理解
- 初识Java NIO
- fork/join 全面剖析
- Odoo 去掉 恼人的 ";上午";和";下午";
- 启动Jmeter4.0 后弹出命令窗口提示信息是什么意思?
- @EnableDiscoveryClient与@EnableEurekaClient 区别
- 在windows下使用多版本Python安装相应的虚拟开发环境
- pytest 常用命令行选项(一)
热门文章
- Codevs 1200 同余方程 2012年NOIP全国联赛提高组
- Liblinear Visual studio 2013 Error C3057
- Android_(控件)使用Gallery浏览手机上SD卡中图片
- 2015ACM/ICPC亚洲区沈阳站 部分题解
- C++模板的偏特化与全特化
- LeetCode 81. 搜索旋转排序数组 II(Search in Rotated Sorted Array II)
- 【黑马JavaSE】1_1_11_IDEA、12_方法、13_重载
- 如何安装Vscode软件及设置成中文界面?
- 为什么有些应用非VxWorks不可
- Ubuntu14.04升级cmake版本的方法