目录

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

1、父传子

2、子传父

3、兄弟之间通信

3.1、父组件充当中间件

3.2、全局事件总线—EventBus

4、爷孙之间通信

5、任意组件、全局

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

1、父传子

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

示例：

 子组件 TitleMore.vue 

// 子组件

    {{ title }}

父组件 

2、子传父

 子组件 

// 子组件

    {{ title }}

 父组件 

3、兄弟之间通信

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

3.1、父组件充当中间件

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

 A组件 

// A组件

    {{ title }}

 B组件 

// B组件

    12

 C组件(父组件) 

    // A组件
        

    // B组件
    

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

 父组件 

 子组件 

    {{ text }}

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使用方式​​​​​​​