$attrs是vue2.4.0新增的一个string属性,只读,包含了父作用域中不作为prop被识别(且获取)的特性(class和style除外)
** 使用场景如下:** 如果你的项目里一个组件(root)嵌套了子组件(son),子组件(son)又嵌套了子组件(grandson),而且在父组件(root)里需要自定义的属性很多,传递给子组件(son)的数据很多,但是并不是每一个组件都会被son组件用到所以vue新增了一个$attrs属性来提高工作效率,具体代码如下:
root组件:
<template>
<son :name="name" :age="age" :title="title" :sex="sex"/>
</template>
son组件:
<template>
<h1>{{name}}</h1>
<grandson v-bind="this.$attrs"/>//$attrs可以获取到没有使用的注册属性
</template>
<script>
export default{
props:{
name:'String'
}
</script>
如上可见,son组件的prop中只接收了name属性,其他没有使用的注册属性可以使用this.$attrs获取,并继续向下传递
grandson组件:
<template>
<h1>
age:{{age}}
title:{{title}}
sex:{{sex}}
</h1>
</template>
<script>
export default{
props:{
age:'Number',
title:'String',
sex:'String'
}
</script>