跳到主要内容

Vue 组件通信 8 种方法

一、props / $emit​

父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。

二、 $children / $parent​

三、provide/ inject​

四、ref / refs​

五、eventBus​

eventBus 又称为事件总线，在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件， 所以组件都可以通知其他组件。 eventBus也有不方便之处, 当项目较大,就容易造成难以维护的灾难 在Vue的项目中怎么使用eventBus来实现组件之间的数据通信呢?具体通过下面几个步骤

  1. 初始化 首先需要创建一个事件总线并将其导出, 以便其他模块可以使用或者监听它. // event-bus.js import Vue from 'vue' export const EventBus = new Vue()

六、Vuex​

  1. Vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题，将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上

七、localStorage / sessionStorage​

这种通信比较简单,缺点是数据和状态比较混乱,不太容易维护。 通过window.localStorage.getItem(key)获取数据 通过window.localStorage.setItem(key,value)存储数据 注意用JSON.parse() / JSON.stringify() 做数据格式转换 localStorage / sessionStorage可以结合vuex, 实现数据的持久保存,同时使用vuex解决数据和状态混乱问题.

总结​

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

参考​