vue3组件通信

在Vue3中,组件之间的通信主要有以下几种方式

       一、 props/emits: 这是最常见的父子组件通信方式。父组件通过props向子组件传递数据,子组件通过emits触发事件并传递数据给父组件

        在子组件中：

                        

        在父组件中：

                        

                        

  二、mitt：一个小型的浏览器和 Node.js 事件发射器库,用于创建事件总线。它提供了一种简单的方式来实现不同组件、模块或任何其他独立逻辑单元之间的通信，这个函数返回一个具有 on、off 、 emit和all 四个方法的对象，主要用于子传子。

• on(type, handler) 用于注册事件监听器。它接受两个参数：事件类型 type 和事件处理函数 handler。
• off(type, handler) 用于移除事件监听器。它接受两个参数：事件类型 type 和要移除的事件处理函数 handler。
• emit(type, evt) 用于发送事件。它接受两个参数：事件类型 type 和事件对象 evt。

        mitt 使用一个对象 all 来存储所有注册的事件监听器。对象的键是事件类型，值是一个数组，存储该事件类型的所有监听器。

        使用：

        1.控制台下载

                

        2.在src目录下创建一个工具文件夹utils，并在utils目录下创建mitter.ts文件

                

        3.在mitter.ts文件中写入

                

        4.在main.ts文件下导入emitter

                

        5.子组件（一）和子组件（二）传递值

        子组件（一）：

                ​​​​​​​

        子组件（二）：

                        ​​​​​​​                        ​​​​​​​        ​​​​​​​

   三、 $attrs ：是Vue.js 中的一个实例属性,用于支持透传属性,即自动将父组件中绑定的非 Props 属性传递给子组件的根元素，主要用于父与孙之间的通讯。

        父组件中：

                      ​​​​​​​        

        子组件中：

        

        孙组件中：

        

        

        最后的输出结果：

        ​​​​​​​        

四、$refs/$parent:

五、provide/inject