vue通讯

1、全局：

1）mitt   

下载mitt

npm install mitt -S

先写个组件emit.js，导出mitt实例   

import  mitt from 'mitt';

const emit = new mitt();

export default emit ;

用法： 

import emit from 'emit.js'

//注册

emit.on('事件名'，function（data）{

})

//调用

emit.emit('监听的事件名',data);

//移除

emit.off('事件名')

2）使用pinia

下载

npm install  pinia

使用

import {createPinia} from 'pinia';

const store = createPinia();

//全局注入

app.use(store)；

//建一个store

在文件中使用

3）事件总线（vue3不能用，vue3移除了prototype,$on,$emit,$once,要使用mitt）

event-bus.js

import Vue from 'vue';

export const eventBus = new Vue();

使用方法

import {eventBus } from './event-bus.js'

eventBus.$emit('事件名'，（参数）=>{});

eventBus.$on('事件名','参数');

eventBus.$off();

也可以在main.js里加上   

Vue.prototype.$EventBus = new Vue()

使用：

this.$EventBus.$emit('事件名'，（参数）=>{});

this.$EventBus.$on('事件名','参数');

this.$EventBus.$off();

2、同一组件链上

1）常规传值

2）组件嵌套深的时候，第一层组件和第n组件之间的传值

使用 provide  inject  （只能获取向上组件的值，不能是并列或旁系）

第一层组件

后面嵌套的第n层组件

第n层组件改变第一层组件的值（即：传的值是个方法）

第一层组件

第二层组件