vue中组件之间的通信方式？

题目分析：vue是组件化开发框架，所以对于vue应用来说组件间的数据通信非常重要。此题主要考查大家vue基本功，对于vue基础api运用熟练度。另外一些边界知识如provide/inject/$attrs/$listeners则体现了面试者的知识面。

思路分析：总分

0. 总述知道的所有方式
1. 按组件关系阐述使用场景

回答范例：

0. 组件通信方式大体有以下8种：(删除线为在vue3中不存在的)

• props
• $emit/ $on
• $children/$parent
• $attrs/ $listeners
• ref
• $root
• eventbus
• vuex

2. 根据组件之间关系讨论组件通信最为清晰有效

• 父子组件

  • props （父传子）
  • $emit（子传父）/ $on
  • $parent / $children
  • ref （父传子）
  • $attrs（爷孙之间） / $listeners

• 兄弟组件(通过以下属性桥接)

  • $parent
  • $root
  • eventbus
  • vuex

• 跨层级关系

  • provide/inject
  • $root
  • eventbus
  • vuex

说一说组件通信的方式？

要点： 父子通信、自定义属性、props、$emit、EventBus、$on、VueX

答： Vue组件的通信方式分为两大类，一类是父子组件通信，另一类是任何关系类型组件通信（父子、兄弟、非兄弟）

父子组件的通信方式：

父给子传递数据，通过给子组件添加自定义属性，比如：''， list是父组件给子组件传递的数据。

子获取父的数据，在子组件中使用props属性获取子给父传递数据，通过给子组件传递父组件的方法，子组件调用父组件的方法传递数据，比如：'' ,deleteHandler就是父组件的函数，在子组件中通过this.$emit('方法名',参数)，调用父组件的方法，并把数据传递到父组件。 props是只读，不可以被修改，所有被修改都会失效和被警告

---

任何关系类型组件通信（父子、兄弟、非兄弟）方式：

EventBus： 使用方法是创建一个新的Vue实例，需要通信的组件都引入该Vue实例，传递数据的组件使用 event.$emit('名称',参数)发送数据，接收数据的组件使用 event.$on('名称',方法)接收数据。

VueX： 集中管理项目公共数据，Vuex 的状态存储是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

---

EventBus的优缺点，

缺点vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。同时如果页面中有反复操作的业务，EventBus在监听的时候就会触发很多次，需要好好处理EventBus在项目中的关系。在vue页面销毁时，同时移除EventBus事件监听。

优点，解决了多层组件之间繁琐的事件传播，使用原理十分简单，代码量少。适合业务简单，组件传递数据较少的项目，大型项目业务复杂的还是尽量使用VueX

---

---

Vue的组件通信一般分为三大类。

1：父子组件通信，最常见的使用props和emit，父组件通过props将数据传递给子组件，子组件通过emit触发父组件中的方法来修改数据。其次还可以通过$ref、$parent和$child进行通信。

2:祖孙组件之间的通信:这种通信一般也可以用props和emit只不过逐层传递会很麻烦，可以使用$listener和$attrs来进行通信。

3:兄弟组件之间的通信:可以创建eventBus事件总线，通过$emit和$on的方式进行通信。其次还有全局数据通信，我们可以使用Vuex作为全局状态管理来实现。