vue3.2组件通讯的七种方式

      本文主要介绍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

你可能感兴趣的:(笔记,vue.js,javascript,前端)