目录

前言：目前组件通信方法有好多种，我这挑选一部分来讲

1、父传子

2、子传父

3、兄弟之间通信

3.1、父组件充当中间件

3.2、全局事件总线—EventBus

4、爷孙之间通信

5、任意组件、全局

---

前言：目前组件通信方法有好多种，我这挑选一部分来讲

方案父传子子传父props / emitspropsemitsv-model / emitsv-modelemitsref / emitsrefemitsprovide / injectprovideinjectEventBusemit / on(可用于兄弟、爷孙、全局)emit / on(可用于兄弟、爷孙、全局)Vuex作用于全局作用于全局pinia作用于全局作用于全局

1、父传子

主要用到props属性传递，父组件通过自定义属性给子组件传值，子组件用props接收

示例：

 子组件 TitleMore.vue 

// 子组件

父组件 

2、子传父

 子组件 

// 子组件

 父组件 

3、兄弟之间通信

• 一种方法是父组件允当两个子组件之间的中间件
• 全局事件总线—EventBus（可以用于兄弟、爷孙、任意组件通信）

  3.1、父组件充当中间件

  假设有A、B、C页面，其中A、B为兄弟组件、C为父组件

   A组件 

  // A组件
  
  

   B组件 

  // B组件
  
  

   C组件(父组件) 

  3.2、全局事件总线—EventBus

  // 安装
  npm install mitt -S

  在assets新建个common文件夹，接着再创建event-bus.js（这个文件命名根据你们的情况来定）

  // event-bus.js
  import mitt from "mitt";
  const EventBus = mitt()
  export default EventBus

   父组件 

   子组件 

  4、爷孙之间通信

  • provide/inject
  • EventBus

    eventBus上述有讲过这里就不讲了，讲一下provide/inject

     父组件 

    import { reactive,provide,ref } from 'vue';
    provide('page', ref('1'))
    provide('user', reactive({
      age: 11,
      name: '张三'
    }))

      子组件 

    import { inject } from 'vue';
    const user = inject("user");
    const page = inject("page");

    爷孙组件无论任何一个组件内的值发生改变，两个组件的值都会进行响应式的数据更新。

    5、任意组件、全局

    • provide/inject
    • EventBus
    • Vuex
    • Pinia

      扩展：

      vue2/vue3 EventBus事件总线(用于组件通信) 

      vue2/vue3 Provide和Inject使用方式​​​​​​​