• Vue2的12种组件通信


    Vue2.x 组件通信共有12种

    1. props
    2. $emit / v-on
    3. .sync
    4. v-model
    5. ref
    6. $children / $parent
    7. $attrs / $listeners
    8. provide / inject
    9. EventBus
    10. Vuex
    11. $root
    12. slot

    父子组件通信可以用:

    • props
    • $emit / v-on
    • $attrs / $listeners
    • ref
    • .sync
    • v-model
    • $children / $parent

    兄弟组件通信可以用:

    • EventBus
    • Vuex
    • $parent

    跨层级组件通信可以用:

    • provide/inject
    • EventBus
    • Vuex
    • $attrs / $listeners
    • $root

    vue2通信使用

    1. props
      父组件向子组件传递数据
      子组件接受到数据之后, 不能直接修改父组件的数据。会报错,所以当父组件重新渲染时,数据会被覆盖。如果子组件内要修改的话推荐使用 computed

    2. $emit / v-on
      子组件通过派发事件的方式给父组件数据,或者触发父组件更新等操作

    3. .sync
      可以帮我们实现父组件向子组件传递的数据的双向绑定,所以子组件接收到数据后可以直接修改,并且会同时修改父组件的数据

    4. v-model
      和 .sync 类似,可以实现将父组件传给子组件的数据为双向绑定,子组件通过 $emit 修改父组件的数据

    5. ref
      ref 如果在普通的DOM元素上,引用指向的就是该DOM元素
      如果在子组件上,引用的指向就是子组件实例,然后父组件就可以通过 ref 主动获取子组件的属性或者调用子组件的方法

    6. $children / $parent
      $children:获取到一个包含所有子组件(不包含孙子组件)的 VueComponent 对象数组,可以直接拿到子组件中所有数据和方法等
      $parent:获取到一个父节点的 VueComponent 对象,同样包含父节点中所有数据和方法等

    7. $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:包含父作用域里除classstyle除外的非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除外的监听事件集合。如果还要继续传给子组件内部的其他组件,就可以通过von="linteners"
      使用方式是相同的

    8. provide / inject
      provide:可以让我们指定想要提供给后代组件的数据或方法
      inject:在任何后代组件中接收想要添加在这个组件上的数据或方法,不管组件嵌套多深都可以直接拿来用
      要注意的是 provide 和 inject 传递的数据不是响应式的,也就是说用 inject 接收来数据后,provide 里的数据改变了,后代组件中的数据不会改变,除非传入的就是一个可监听的对象

    9. EventBus
      EventBus 是中央事件总线,不管是父子组件,兄弟组件,跨层级组件等都可以使用它完成通信操作

    10. Vuex
      Vuex 是状态管理器,集中式存储管理所有组件的状态。

    11. $root
      $root 可以拿到 App.vue 里的数据和方法

    12. slot
      就是把子组件的数据通过插槽的方式传给父组件使用,然后再插回来

  • 相关阅读:
    照片批量处理 7000张
    数据结构-leetcode-环形链表
    新手入门丨一堆代码在报错,如何才能快速定位Bug?!
    关于Python的局部变量和全局变量使用介绍
    python画板
    Git-cherry pick的使用
    webserver 同步 I/O 模拟 Proactor 模式的工作流程
    加强版python连接飞书通知——本地电脑PC端通过网页链接打开本地已安装软件(调用注册表形式,以漏洞扫描工具AppScan为例)
    【面试:并发篇33:cas】原子更新器 原子累加器 缓存一致性问题
    stable diffusion Temporal-kit和EbSynth视频转动画学习笔记
  • 原文地址:https://blog.csdn.net/qq_49029709/article/details/125811686