Vue3组件常用的通信方式

一、分别有七种组件通信方式

• props
• emit
• v-modle
• refs
• provide/iniject
• eventBus
• Vuex4/pinia

 1.props方式

父组件以数据绑定的形式声明要传递得数据，子组件通过defineProperty()方法创建props对象，即可拿到父组件传来的数据；

 2.emit方式

emit方式也是vue中最常见的组件通信方式，该方式用于子传父；

3.v-model方式

v-model不能严格成为数据的传递方式，其实只是减少了代码量

4.refs方式

有时候想访问r e f s 绑 定 的 组 件 的 属 性 或 者 方 法 ， 我 们 会 使 用 refs绑定的组件的属性或者方法，我们会使用refs绑定的组件的属性或者方法，我们会使用refs。但是Vue3不同于Vue2，在 Vue3的setup中我们是无法访问到this的，所以我们需要借助一个方法，那就是getCurrentInstance，该方法返回了当前的实例对象;

5. provide/inject方式

provide/inject是vue中提供的一对api。无论层级多深，api都可以实现父组件到子孙组件的数据传递；

6. eventBus方式

vue3中移除了eventBus，但可以借助第三方工具来完成。vue官方推荐使用mitt或emitter;

 7.vuex/pinia

vuex和pinia是vue3中的状态管理工具，使用这两个工具可以轻松实现通信；