vue3.2组件通讯的七种方式
创始人
2024-04-21 18:40:59
0

      本文主要介绍Vue3组件的七种通讯方法,并采用



 二、emit【子组件通知父组件触发一个事件,且可以传值给父组件】




三、expose / ref【子组件可以通过 expose 暴露自身的方法和数据,父组件通过 ref 获取到子组件并调用其方法或访问数据。





四、v-model【支持多个数据双向绑定





五、provide / inject【多层传值】

        **注:遇到多层传值时,使用 props 和 emit 的方式会显得比较笨拙。这时就可以是用provide和inject 。

        provide 是在父组件里使用的,可以往下传值。inject 是在子(后代)组件里使用的,可以往上取值。无论组件层次结构有多深,父组件都可以作为其所有子组件的依赖提供者。





六、mitt

        Vue3 中没有了 EventBus 跨组件通信,但是现在有了一个替代的方案 mitt.js,原理还是 EventBus。

先安装 npm i mitt -S 然后像以前封装 bus 一样,封装一下

//mitt.js
import mitt from 'mitt'
const mitt = mitt()
export default mitt
// 组件 A
// 组件 B

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
【PdgCntEditor】解... 一、问题背景 大部分的图书对应的PDF,目录中的页码并非PDF中直接索引的页码...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...
有效的括号 一、题目 给定一个只包括 '(',')','{','}'...