</script>
```
```
非父子组件之间的通信
通过中央事件总线来进行通信
通过新建一个Vue事件的bus对象,然后通过bus.$emit来触发事件,bus.$on监听触发的事件。使用中央事件总线时,需要在手动清除它,不然它会一直存在,原本只执行一次的操作,将会执行多次。
具体
```
// 父组件
<template>
<div>
<One />
<Two />
</div>
</template>
<script>
import One from './one.vue';
import Two from './two.vue';
export default {
data() {
return {
}
},
components: {
One,
Two
}
}
</script>
// one组件
<template>
<div>
<h3>第一个组件</h3>
<button @click="add">增加数量</button>
</div>
</template>
<script>
import {BUS} from './index.js';
export default {
data() {
return {
}
},
methods: {
add() {
BUS.$emit('add');
}
},
beforeDestory() {
BUS.$off('add');
}
}
</script>
// two组件
<template>
<div>
<h3>第二个组件</h3>
<h3>数量: {{num}}</h3>
</div>
</template>
<script>
import {BUS} from './index.js';
export default {
data() {
return {
num: 1
}
},
mounted() {
BUS.$on('add', () => {
this.num += 1;
})
},
beforeDestroy() {
BUS.$off('add');
}
}
</script>
// index.js 创建的bus
import Vue from 'vue';
export const BUS = new Vue({
})
```通过vuex来进行数据管理,具体内容见vuex官网
如果有什么不对的地方,或者还有什么方法我没有写到,希望大家可以提出来,谢谢。
总结
以上所述是小编给大家介绍的Vue组件之间通信的七种方式，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
