VUE组件间通信

112 阅读1分钟

简要回答

父传子:props

子传父:$emitref

兄弟:EventBus

多级或跨级:VuexEventBusprovide / inject$attrs/$listeners

provide / inject

  • provide/inject 是在构建的对象中注入所依赖的数据,使用的是依赖注入的思想
  • provide 在祖先组件使用,inject 在子孙组件使用。 provide 可以是一个对象,或是一个返回对象的函数。Object | () => Object 子孙组件可通过这个对象的 key,获取到要依赖的数据。
  • inject 可以是一个字符串数组,数组中字符串即 provide 中对象的key;也可以是一个对象,这个对象的 key 是子组件的 property,value 可以是 provide 对象中的 key,也可以是一个对象(2.5.0 新增),对象包含 from、default两个属性,from 对应的值 为 provide 对象中的 key,default 是未找到相应 key 的情况下使用的值。

$attrs/$listeners 

  • $attrs:包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 props 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind=”$attrs” 传入内部组件——在创建更高层次的组件时非常有用。 
  • $listeners:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件——在创建更高层次的组件时非常有用。