【Vue】vue中的$attrs到底是什么?
先来看看官方文档给的定义:包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class和style除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class和style除外),并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。既然来到这里就继续往下看!既然是跟组件间数据传值有关,话不多说,直接上
·
先来看看官方文档给的定义:
包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (
class
和style
除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class
和style
除外),并且可以通过v-bind="$attrs"
传入内部组件——在创建高级别的组件时非常有用。
既然来到这里就继续往下看!
既然是跟组件间数据传值有关,话不多说,直接上栗子:
<div id="app">
Parent: {{msg}}
<son-component v-bind:msg="msg"></son-component>
</div>
let vm = new Vue({
el: '#app',
data: {
msg: 'baseDom'
},
//使用props接收
components:{
'son-component': {
props: [
'msg'
],
template:`<div>Son: <grandson-component v-bind:msg="msg"></grandson-component></div>`,
components:{
'grandson-component': {
props: [
'msg'
],
template: `<div>Grandson: {{msg}}</div>`
}
}
}
}
})
- 根组件内调用son-component,并且绑定根组件data中的变量msg;
- 此时son-component中通过定义props可以接收到根组件的msg;
- 然后son-component中定义grandson-component组件,并且绑定msg;
- 此时grandson-component通过定义props可以接收到son-component组件的msg;
- 仔细查阅组件代码,发现msg在son-component组件中仅仅起到传递作用;
- 有没有其它办法解决传值冗余呢?别问,问就有;
let vm = new Vue({
el: '#app',
data: {
msg: 'baseDom'
},
//使用$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>`
}
}
}
}
})
- 首先,在son-component中不再接收根组件的msg;
- son-component组件调用grandson-component组件,绑定主角$attrs;
- 即可实现接收根组件msg;
总结:多级组件传值时,调用目标组件绑定$attrs,可直接获取根组件所传递参数,而不用每一级组件逐层传递。
更多推荐
已为社区贡献13条内容
所有评论(0)