avatar

Vue通信方式

分类

  • 父子组件通信: props; $parent / $children; provide / inject ; ref ; $attrs / $listeners
  • 兄弟组件通信: eventBus ; vuex
  • 跨级通信: eventBus;Vuex;provide / inject$attrs / $listeners

Vue的通信方式根据使用场景可以分为以下几类:

  • 父子组件通信
  • 兄弟组件通信
  • 跨组件通信

父子组件通信

  1. props/$emit

    • 父组件通过 props 向子组件内进行值传递;
    • 子组件通过向父组件触发 $emit 事件进行传递;
  2. eventBus
    通过 Vue 创建一个空的实例进行事件的传递

    1
    2
    3
    4
    5
    var eventBus = new Vue();
    // 触发事件
    eventBus.$emit('eventName', {});
    //事件接收者
    eventBus.$on('eventName', data => console.log(data));
  3. $parent/$children

    • $parent: 组件中可以使用 $parent获取到父对象来进行通信;$root 节点的 $parent 对象 为 undefined, 可以通过 $root 来获取根节点。 通过 $parent 获取到的对象为 Vue对象。
    • $children: 可以使用组件的 $children 来进行通信,获取到的对象是 数组 类型,所以需要用 索引 来获取组件
  4. ref
    通过设置 $ref 来获取组件对象;$ref 增加到 $dom元素上,获取的就是$dom元素;增加到组件上,获取的就是组件对象。

兄弟组件通信

  1. eventBus
  2. Vuex

跨组件通信

  1. evnetBus

  2. Vuex

  3. provide/inject
    允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。这两个必须匹配使用。默认的数据不是响应式的,也就是说更改属性后不会同步更新,需要手动实现响应式数据绑定。

    1
    2
    3
    4
    5
    export default {
    provide: {
    videoName: 'test.mp4'
    }
    }
    1
    2
    3
    4
    5
    6
    export default {
    inject: ['videoName'],
    mounted () {
    console.log(this.videoName); // test.mp4
    }
    }
  1. $attrs/$listeners
文章作者: 惆怅客
文章链接: https://www.songhailong.com/articles/9f5b19c3/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 惆怅客

评论