Vue3组件通用方式

本文详细介绍了Vue中七种主要的组件通信方式,包括props、emit、v-model、refs、provide/inject、eventBus以及Vuex和pinia状态管理工具,帮助开发者理解和选择最适合的通信策略。
摘要由CSDN通过智能技术生成

一、分别有七种组件通信方式
props
emit
v-modle
refs
provide/iniject
eventBus
Vuex4/pinia
 1.props方式
父组件以数据绑定的形式声明要传递得数据,子组件通过defineProperty()方法创建props对象,即可拿到父组件传来的数据;

 2.emit方式
emit方式也是vue中最常见的组件通信方式,该方式用于子传父;

3.v-model方式
v-model不能严格成为数据的传递方式,其实只是减少了代码量

4.refs方式
有时候想访问r e f s 绑 定 的 组 件 的 属 性 或 者 方 法 , 我 们 会 使 用 refs绑定的组件的属性或者方法,我们会使用refs绑定的组件的属性或者方法,我们会使用refs。但是Vue3不同于Vue2,在 Vue3的setup中我们是无法访问到this的,所以我们需要借助一个方法,那就是getCurrentInstance,该方法返回了当前的实例对象;

5. provide/inject方式
provide/inject是vue中提供的一对api。无论层级多深,api都可以实现父组件到子孙组件的数据传递;

6. eventBus方式
vue3中移除了eventBus,但可以借助第三方工具来完成。vue官方推荐使用mitt或emitter;

 7.vuex/pinia
vuex和pinia是vue3中的状态管理工具,使用这两个工具可以轻松实现通信;

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值