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传值

子组件


父组件中:直接给子组件传 type="text" placeholder="请输入用户名" v-model="msg"  这些数据, 子组件没有用peops接收,

而是用V-bind='$attrs',接收了所有父组件给传过来的属性,

inheritAttrs:是否将属性添加到根节点上,默认为true
子组件


 当子组件用props接收了msg,那么$attrs就不存在这个属性了

 如何给孙子传

 在子组件用v-bind="$attrs"接收,然后再孙子组件展开就可以

子组件


$listeners

 父组件用自定义事件的方法向子组件传递方法

父组件


 孙子组件触发自定义事件($emit('自定义事件名',数据))

孙子组件

vue