vue2的十二种组件通信

104 阅读2分钟
  1. props
    父组件向子组件传送数据,这应该是最常用的方式了
    子组件接收到数据之后,不能直接修改父组件的数据。会报错,所以当父组件重新渲染时,数据会被覆盖。如果子组件内要修改的话推荐使用 computed
  2. .sync
    可以帮我们实现父组件向子组件传递的数据 的双向绑定,所以子组件接收到数据后可以直接修改,并且会同时修改父组件的数据
  3. v-model
    和 .sync 类似,可以实现将父组件传给子组件的数据为双向绑定,子组件通过 $emit 修改父组件的数据
  4. ref
    ref 如果在普通的DOM元素上,引用指向的就是该DOM元素;
    如果在子组件上,引用的指向就是子组件实例,然后父组件就可以通过 ref 主动获取子组件的属性或者调用子组件的方法
  5. $emit / v-on
    子组件通过派发事件的方式给父组件数据,或者触发父组件更新等操作
  6. attrs/attrs / listeners
    多层嵌套组件传递数据时,如果只是传递数据,而不做中间处理的话就可以用这个,比如父组件向孙子组件传递数据时

a t t r s : 包 含 父 作 用 域 里 除 c l a s s 和 s t y l e 除 外 的 非 p r o p s 属 性 集 合 。 通 过 t h i s . attrs:包含父作用域里除 class 和 style 除外的非 props 属性集合。通过 this.attrs:包含父作用域里除class和style除外的非props属性集合。通过this.attrs 获取父作用域中所有符合条件的属性集合,然后还要继续传给子组件内部的其他组件,就可以通过 v-bind="$attrs"

l i s t e n e r s : 包 含 父 作 用 域 里 . n a t i v e 除 外 的 监 听 事 件 集 合 。 如 果 还 要 继 续 传 给 子 组 件 内 部 的 其 他 组 件 , 就 可 以 通 过 v − o n = " listeners:包含父作用域里 .native 除外的监听事件集合。如果还要继续传给子组件内部的其他组件,就可以通过 v-on="listeners:包含父作用域里.native除外的监听事件集合。如果还要继续传给子组件内部的其他组件,就可以通过v−on="linteners"使用方式是相同的

  1. children/children / parent
    children:获取到一个包含所有子组件(不包含孙子组件)VueComponent对象数组,可以直接拿到子组件中所有数据和方法等 children:获取到一个包含所有子组件(不包含孙子组件)的 VueComponent 对象数组,可以直接拿到子组件中所有数据和方法等\ parent:获取到一个父节点的 VueComponent 对象,同样包含父节点中所有数据和方法等
  2. ** provide / inject**
    provide / inject 为依赖注入,说是不推荐直接用于应用程序代码中,但是在一些插件或组件库里却是被常用,所以我觉得用也没啥,还挺好用的
    provide:可以让我们指定想要提供给后代组件的数据或方法
    inject:在任何后代组件中接收想要添加在这个组件上的数据或方法,不管组件嵌套多深都可以直接拿来用
    要注意的是 provide 和 inject 传递的数据不是响应式的,也就是说用 inject 接收来数据后,provide 里的数据改变了,后代组件中的数据不会改变,除非传入的就是一个可监听的对象
    所以建议还是传递一些常量或者方法
  3. EventBus
    EventBus 是中央事件总线,不管是父子组件,兄弟组件,跨层级组件等都可以使用它完成通信操作
    定义方式有三种
  4. Vuex
    Vuex 是状态管理器,集中式存储管理所有组件的状态。
  5. **root root**\ root 可以拿到 App.vue 里的数据和方法
    通过 $root,任何组件都可以获取当前组件树的根 Vue 实例,通过维护根实例上的 data,就可以实现组件间的数据共享。
    通过这种方式,虽然可以实现通信,但在应用的任何部分,任何时间发生的任何数据变化,都不会留下变更的记录,这对于稍复杂的应用来说,调试是致命的,不建议在实际应用中使用。
  6. slot
    就是把子组件的数据通过插槽的方式传给父组件使用,然后再插回来

总的来说vue2的十二种组件通信可以分为三大类

  • 父子组件通信: props$parent / $children provide / inject 、 ref \ $refs 、 $attrs / $listeners

  • 兄弟组件通信: eventBus 、 vuex

  • 跨级通信: eventBus、 Vuex、 provide / inject 、 $attrs / $listeners