vue 2 和 vue3 组件的五种通讯方式

1. props 和 $emit

适用于父子组件

父组件：通过:list像子组件传递参数，@showMsg获取子组件传过来的值

子组件：通过props监听，当点击按钮时，发送this.$emit('父组件的方法'，参数)

2. 自定义事件 event.emit event.on event.off

适用于不相关组件直接的通讯。

vue2同vue3获取总线的方式不同：vue2是直接new vue()实例即可

vue3是使用插件mitt

多对多

event.js

CustomDemo2和CustomDemo3是两个没有关系的组件

CustomDemo3中发送事件

CustomDemo2中监听事件：

vue3 自定义事件 推荐使用mitt插件

1）安装mitt

cnpm i mitt 

2) main.ts 全局引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from '../src/router/index'
import 'element-plus/dist/index.css'
import '../src/assets/css/icon.css'
import { createPinia } from 'pinia'
**import mitt, { Emitter } from 'mitt';
type Events = {
    foo: string;
    bar?: number;
}
const mitter: Emitter = mitt();
const emitter = mitt();**
**app.config.globalProperties.$bus = emitter;**


/**
 * 完整引入 elementPlus 不推荐
 * import ElementPlus from 'element-plus'
 */

const pinia = createPinia();
const app = createApp(App);
app.use(router);


app.use(pinia);
app.mount('#app')

3) 父子组件联系

 child.vue

  Parent.vue

3. $attrs

适用于父子组件。

vue2中在子组件mouted()里面 直接获取 

this.$attrs就可以获取父亲组件中的属性

this.$listeners就可以获取父亲组件中的方法



父组件：定义子组件的属性和方法

子组件：mouted中可获取

vue3中，在子组件mouted通过 this,$attrs中获取属性和方法。



也就是说vue3中将this.$listeners和this.$attrs中合并到this.$attrs中。

同时$attrs是对props和emit的补充。

4. $parent $refs

vue2中：

父组件：在子组件上使用ref

mouted中可以调用子组件的方法和属性

子组件

在mounted中使用可获取父组件的方法和属性

5. provide和inject

适用于任何场合

一个组件中提供

另一个组件中通过inject使用