Vue组件间通信-- $attrs与$listeners/6
$attrs与$listeners
祖先传递数据给子孙
如果要C组件要使用A组件的方法或者数据.要不用props传递(繁琐),要不用eventBus或者vuex(大材小用)
利用 $attrs 实现祖孙组件间的数据传递, $listeners 实现祖孙组件间的事件监听
$attrs
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
我的理解:
接收除了props声明外的所有绑定属性(class、style除外)
父组件
父组件中v-model="msg",相当于:value='msg',也就是props传值
子组件
$attrs: {{ $attrs }}
父组件中:直接给子组件传 type="text" placeholder="请输入用户名" v-model="msg" 这些数据, 子组件没有用peops接收,
而是用V-bind='$attrs',接收了所有父组件给传过来的属性,
inheritAttrs:是否将属性添加到根节点上,默认为true子组件
{{ $attrs }}
当子组件用props接收了msg,那么$attrs就不存在这个属性了
如何给孙子传
在子组件用v-bind="$attrs"接收,然后再孙子组件展开就可以
子组件
$listeners
父组件用自定义事件的方法向子组件传递方法
父组件
孙子组件触发自定义事件($emit('自定义事件名',数据))
孙子组件