Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)

2020-06-12 21:10:16易采站长站整理

inheritAttrs :false

c=’ture1.png’>

官方解释:默认情况下父作用域的不被认作

props
的特性绑定 (
attribute bindings
) 将会“回退”且作为普通的
HTML
特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时,这可能不会总是符合预期行为。通过设置
inheritAttrs
false
,这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性
$attrs
可以让这些特性生效,且可以通过
v-bind
显性的绑定到非根元素上。

$attrs

我的解释就是:存放没有被子组件继承的的数据对象;看看图

官方文档解释:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind=”$attrs” 传入内部组件——在创建高级别的组件时非常有用。

$listeners

我的理解就是:子组件可以触发父组件的事件(不需要用什么那些麻烦的vuex或者一个空的

Vue
实例作为事件总线,或者又是什么
vm.$on
)

官方文档解释:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件——在创建更高层次的组件时非常有用。

总结

以上所述是小编给大家介绍的Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持!