vue2、vue3 组件通讯

一.vue2

 1.父传子： props主要用于父组件传递数据给子组件。

  在父组件中使用$ref自定义属性进行发送

 在子组件中使用props进行接收

 2.子传父： 使用自定义事件$on  $emit。

在子组件中首页$emit发送数据，触发自定义事件 

在父组件中使用$on 触发回调函数得到参数

 

 仅仅用于父子组件传递，不适用于 三层及其以上

3.非父子组件传参：全局事件总线

 安装全局事件总线

使用 

 

 二.vue3

除了可以使用vue2的父子传参之外还可以使用以下传参方式

使用全局事件总线需要使用第三方工具

1.provide/inject

provide/inject是 Vue 中提供的一对 API。无论层级多深，API 都可以实现父组件到子孙组件的数据传递。

 

2.vue3使用全局事件总线

 Vue 3 中移除了 eventBus，但可以借助第三方工具来完成

(1) 安装第三方工具

npm i mitt -s

(2) 安装完成后，根目录新建一个文件夹mitt，创建一个文件叫event.js
文件内容如下：

import mitt from 'mitt'

const emitter = mitt();

export default emitter

(3)在需要传递的两个组将中引入 你创建的文件

import emitter from '文件地址'

(4)在setup中使用emitter.on

setup(){

emitter.on('edit',(data)=>{

console.log（data）

})

return{}

}

(5)触发

setup(){

emitter.emit('edit','需要传递的数据')

return{}

}