Vue3（五）：组件通信详解（九种方法）

主要有九种方法，以下是详细解释及使用方法：

1.props

props实现父子间的通信，是使用频率最高的。

（1）父传子：属性值是非函数。

以Father.vue和Child.vue 为例。

父组件中，引入子组件并给子组件绑定一个car参数,

子组件中，使用defineProps([''])接收，在template中，可以直接使用car

（2）子传父：属性值是函数

其实子传父前提父亲先给子传递一个函数，子接收到了再传给父。

比如我要把儿子的toy传给父亲，那么就需要在父中先定义一个getToy函数，用:sendToy=''getToy"传给子，然后子再去调用sendToy。

2.自定义事件emit

1. 概述：

自定义事件常用于：子 => 父

2. 原生Dom事件、自定义事件

（1）原生Dom事件：

  - 事件名是特定的（click、dbdlick、change等等）

  - 事件对象`$event`: 是包含事件相关信息的对象（`pageX`、`pageY`、`target`、`keyCode`）

（2）自定义事件：

  - 事件名是任意名称

  - <strong style="color:red">事件对象`$event`: 是调用`emit`时所提供的数据，可以是任意类型！！！</strong >

1. vue2中 @click是自定义事件，可以通过.native修饰符变为原生DOM事件。

2. 在vue3中@click是原生DOM事件

3. `$event是事件对象

3. 例如：

子组件传给父亲toy，就可以这样做：父组件自定义一个send-toy方法，然后子组件使用defineEmits接收，再用emit传给父亲，之后父亲利用send-toy的回调保存传输过来的toy

3.mitt

1.概述

与消息订阅与发布（`pubsub`）功能类似，可以实现任意组件间通信。

就是只要任意两个组件能够摸到emitter，就能实现通信。

2.使用mitt

（1）安装mitt

npm i mitt

（2）新建文件：src\utils\emitter.ts

// 引入mitt 
import mitt from "mitt";

// 创建emitter
const emitter = mitt()

/*
  // 绑定事件
  emitter.on('abc',(value)=>{
    console.log('abc事件被触发',value)
  })
  emitter.on('xyz',(value)=>{
    console.log('xyz事件被触发',value)
  })

  setInterval(() => {
    // 触发事件
    emitter.emit('abc',666)
    emitter.emit('xyz',777)
  }, 1000);

  setTimeout(() => {
    // 清理事件
    emitter.all.clear()
  }