> For the complete documentation index, see [llms.txt](https://yyaozhibo.gitbook.io/qian-duan-xue-xi/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yyaozhibo.gitbook.io/qian-duan-xue-xi/vue/zu-jian-jian-de-tong-xin.md).

# 组件间的通信

兄弟组件之间如何通信

## **方法一、通过父组件通信**

此方法需要保证兄弟组件 A、B 都在同一个父组件下；

父组件通过接受子组件A传递过来的事件消息，并调用子组件B

```javascript
// 子组件 A
this.$emit('transmit', 'msg')
```

```jsx
// 父组件
<ChildA @transmit="transmit"></ChildA>
<ChildB :msg="msg"></ChildB>

transmit (data) => {
    this.msg = data 
}
```

```javascript
// 子组件 B、需要使用 watch 来监听父组件 props 穿过来的数据变化
watch (new, old) {
    数据操作... 
}
```

## **方法二、eventBus**

通过创建Bus.js注册一个全局实例，通讯组件通过调用实例的方法达到通讯目的

### 创建 Bus.js

```javascript
// eventBus 共享vue实例，用于兄弟组件数据传递
import Vue from 'vue'
const Bus = new Vue({})
export {Bus}
```

### 组件 A 导入 Bus.js 并 emit 消息

```javascript
import {Bus} from './Bus.js'

Bus.$emit('transmit', 'msg')
```

### 组件 B 导入 Bus.js 并在 mounted 中检测数据变化

```javascript
import {Bus} from './Bus.js'

mounted () {
    Bus.$on('transmit', (data) => {
        // 操作...
    })
}

// 由于$on事件无法主动销毁，所以需要根据业务手动进行销毁

// 在组件销毁前方法中销毁
beforeDestory () {
    Bus.$off('transmit')
}

// 或者在使用前进行销毁
mounted () {
    Bus.$off('transmit')
    Bus.$on('transmit', (data) => {
         // 操作...
    })
}
```