本文主要介绍Vue3组件的七种通讯方法,并采用
{{ meg }}
父组件:{{ message }}
子组件:
父组件:拿到子组件的message数据:{{ msg }}
子组件:{{ message }}
{{ msg1 }} {{ msg2 }}
**注:遇到多层传值时,使用 props 和 emit 的方式会显得比较笨拙。这时就可以是用provide和inject 。
provide 是在父组件里使用的,可以往下传值。inject 是在子(后代)组件里使用的,可以往上取值。无论组件层次结构有多深,父组件都可以作为其所有子组件的依赖提供者。
msg1: {{ msg1 }}msg2: {{ msg2 }}
Vue3 中没有了 EventBus 跨组件通信,但是现在有了一个替代的方案 mitt.js,原理还是 EventBus。
先安装 npm i mitt -S 然后像以前封装 bus 一样,封装一下
//mitt.js
import mitt from 'mitt'
const mitt = mitt()
export default mitt
// 组件 A
// 组件 B