在使用Vue3
构建中大型web应用时, 组件通信 肯定是不可避免的。本文就具体介绍一下使用Vue3
的 props、 $emit、expose / ref、$attrs、v-model、provide / inject、Vuex、mitt 等方式进行组件通信。
1.props
用 props
传数据给子组件有两种方法,如下
- 混合写法:
Option API
+setup
1 | // Parent.vue 传参 |
- 纯
Vue3
写法:Composition API
(<script setup>
)
1 | // Parent.vue 传参 |
注意:
- 如果父组件是混合写法,子组件纯
Vue3
写法的话,是接收不到父组件里data
的属性,只能接收到父组件里setup
函数里传的属性。 - 如果父组件是纯
Vue3
写法,子组件混合写法,可以通过props
接收到data
和setup
函数里的属性,但是子组件要是在setup
里接收,同样只能接收到父组件中setup
函数里的属性,接收不到data
里的属性。 - 官方推荐纯
Composition API
(<script setup>
)。
2.$emit
1 | // Child.vue 派发 |
3.expose / ref
父组件获取子组件的属性或者调用子组件方法
1 | // Child.vue |
4.attrs
attrs
:包含父作用域里除class
和style
除外的非props
属性集合 。
1 | // Parent.vue 传参 |
5.v-model
可以支持多个数据双向绑定
1 | // Parent.vue |
6.provide / inject 依赖注入
provide
:可以为后代组件提供数据和事件。inject
:在任何后代组件中接收想要添加在这个组件上的数据,不管组件嵌套多深都可以直接拿来用。
1 | // Parent.vue |
7.Vuex
- 配置、导入
1 | // store/index.js |
- 使用
1 | // Page.vue |
详细事例可参考:Vuex状态管理
8.mitt
在Vue3
中没有了 EventBus
跨组件通信,但是现在有了一个替代的方案 mitt.js
,原理还是 EventBus
。
先安装 mitt.js
1 | npm i mitt -S |
然后像以前封装 EventBus
一样,封装:
1 | // mitt.js |
然后在两个组件之间通信使用:
1 | // 组件 A |
《Vue3学习与实战》系列
- Vue3学习与实战 · 组件通信(本文)
- Vue3学习与实战 · 全局挂载使用Axios
- Vue3学习与实战 · 配置使用vue-router路由
- Vue3学习与实战 · Vuex状态管理
- vue3 + vite实现异步组件和路由懒加载
- Vite+Vue3+Vant快速构建项目
欢迎访问:天问博客
本文作者: Tiven
发布时间: 2021-12-28
最后更新: 2022-12-07
本文标题: Vue3学习与实战 · 组件通信
本文链接: https://www.tiven.cn/p/97da9e37/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
发布时间: 2021-12-28
最后更新: 2022-12-07
本文标题: Vue3学习与实战 · 组件通信
本文链接: https://www.tiven.cn/p/97da9e37/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!