Vue组件通信最全篇

最新推荐文章于 2024-06-22 23:02:32 发布

前端铁蛋儿

最新推荐文章于 2024-06-22 23:02:32 发布

阅读量161

点赞数

文章标签： vue.js 前端框架前端 javascript

本文链接：https://blog.csdn.net/weixin_39206309/article/details/119836490

版权

本文详细介绍了Vue2和Vue3中组件通信的方法，包括props、$emit、$refs、provide/inject、EventBus等，并强调了Vuex的重要性。随着Vue3的发布，EventBus的使用减少，推荐使用Prop和事件进行父子通信。文章提到了Vuex在TypeScript支持上的不足，引出了Pinia——一个轻量级的Vue状态管理库，作为Vue2和Vue3的替代方案，具有更好的TypeScript支持和较小的体积。最后，对比了Vuex和Pinia的优缺点，建议根据项目规模选择合适的状态管理工具。

摘要由CSDN通过智能技术生成

Vue组件通信全篇

说到Vue3的组件通信,还得从Vue2的组件通信说起, 小伙伴们查漏补缺哈

拍脑门.gif

首先我们来看下组件的几种用法循序渐进:

Vue2的用法总结下帮助小伙伴们加深下记忆,如果还没不是很熟悉基础的小伙伴可以去看下官网。

父子组件通信
- props 父到子
- $emit 子到父
- ref、$refs 子到父
- $parent 子到父
- $children 父到子 (Vue3此方法作废)

多层级父子组件通信

provide、inject 父到子或者子到父

// provide 声明
provide() {
  return {
    title: '我是app',
    ComApp: this, 
  }
}
// inject 使用
// 使用的时候可以拿到父组件的this也就是ComApp进行传递数据
 inject: ['title', 'ComApp'],

$attrs 利用属性的传递数据配合inheritAttrs使用
$listeners (Vue3此方法作废监听功能是 attrs的一部分)

非关系组件通信(EventBus也称为事件总线)

Vue2的EventBus:

// eventBus.js

const eventBus = new Vue()

export default eventBus

// ChildComponent.vue
import eventBus from './eventBus'

export default {
  mounted() {
    // 添加 eventBus 监听器
    eventBus.$on('custom-event', () => {
      console.log('Custom event triggered!')
    })
  },
  beforeDestroy() {
    // 移除 eventBus 监听器
    eventBus.$off('custom-event')
  }
}