包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
在vue中通过props来传递参数的时候,可能会遇到需要父直接传到孙的情况,此值在子组件中并没有什么作用,只是在孙子组件中有用到,这个时候就可以通过$attrs来传递参数,例如
let vm = new Vue({
el: '#app',
data: {
msg: '父组件的内容'
},
//使用$attrs接收
components:{
'son-component': {
// props: [
// 'msg'
// ],
template:`<div>Son: <grandson-component v-bind="$attrs"></grandson-component></div>`,
components:{
'grandson-component': {
props: [
'msg'
],
template: `<div>Grandson: {{msg}}</div>`
}
}
}
}
})
1.首先,在子组件中不用再通过props来接收来自父组件的信息;
2.在子组件中调用孙子组件,绑定$attrs;
3.这样在孙子组件就能直接接收父组件的内容