Vue2.4.0中如何巧妙运用$attrs和inheritAttrs实现组件间属性继承的最佳实践？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1355个文字，预计阅读时间需要6分钟。
Vue组件间传递值，父子组件间通常使用props和emit。而祖孙组件间传递，则需要中间人——子组件，当祖辈有值需传递给孙辈时，子组件作为中间人接收并传递。
vue父子组件之间的传值我们都知道使用props和emit，但是祖孙之间的传值在以前，我们都需要子辈作为中间人，当祖辈有值要传递给孙辈时，需要子辈作为中间人把值传递给孙辈，当孙辈想要改变祖辈的值时，需要先emit子辈的方法，然后子辈再emit父辈的方法从而改变祖辈的值，如果是多级组件嵌套的话，那么祖孙辈之间传值，就会变得非常的繁琐，为了解决这个需求，vue2.4版本产生了$attrs，$listeners，inheritAttrs这三个属性。
vm.$attrs
官方API
vm.$attrs
2.4.0 新增，类型：{ [key: string]: string }，只读
详细：
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
本文共计1355个文字，预计阅读时间需要6分钟。
Vue组件间传递值，父子组件间通常使用props和emit。而祖孙组件间传递，则需要中间人——子组件，当祖辈有值需传递给孙辈时，子组件作为中间人接收并传递。
vue父子组件之间的传值我们都知道使用props和emit，但是祖孙之间的传值在以前，我们都需要子辈作为中间人，当祖辈有值要传递给孙辈时，需要子辈作为中间人把值传递给孙辈，当孙辈想要改变祖辈的值时，需要先emit子辈的方法，然后子辈再emit父辈的方法从而改变祖辈的值，如果是多级组件嵌套的话，那么祖孙辈之间传值，就会变得非常的繁琐，为了解决这个需求，vue2.4版本产生了$attrs，$listeners，inheritAttrs这三个属性。
vm.$attrs
官方API
vm.$attrs
2.4.0 新增，类型：{ [key: string]: string }，只读
详细：
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。