Vue组件化（vue2与vue3）_vue3的组件化和vue2的组件化-CSDN博客

本文介绍了Vue2和Vue3中组件通信的不同方式，包括props、eventbus、vuex、自定义事件、$attrs、$refs、provide/inject等。在Vue3中，props需要在setup中定义并返回，$parent和$children不再支持事件监听，而slot在两个版本中的使用基本保持一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue组件化（vue2与vue3）

1. 在vue2中组件的通信方式

1.1 组件常用的通信方式

props、eventbus、vuex、自定义事件
边界情况 $ parent 、$ children 、$ root 、$ refs、provide/inject
非prop特性$ attrs 、$ listeners

A、在父对子传值用props，子对父传值可以用自定义事件emit出去

B、在任意两个组件之间传值一般我们会想到vuex的方式，这个具体怎么用请看文档（vue2），或等下回分解（要和vue3中做对比的）；或者使用公共依赖vue-bus（npm install vue-bus）；

C、$ attrs，这个是包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class和style除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和style除外)，并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用
【为什么会有这么一个玩意？可以简单的理解，因为在v-for中需要绑定一个key，这个key一般在组件中是没有props去声明的，因此需要有这么一个特性去解决】

获取值如下：

this.$attrs[<属性>]

D、refs

C、provide和inject（在vue3这个就是组件式api的一份子了），作用是能跨层级去通信

//祖辈提供
provide() {
  return {
    foo: 'foooooooooo'
  }
},
//子代注入
inject: ['foo'],//使用就是直接$this.foo

1.2 在vue3中组件的通信方式

A.、props 在vue3中不光要像vue2中先定义，并且要在setup中return出来，值得注意的是不能直接在return的时候使用解构，否则会失去动态响应，如果需要解构 prop，可以通过使用 setup 函数中的 toRefs 来安全地完成此操作

B、vuex 不赘述，后面会讲

C、$ parent，在vue3中虽然也是父级的实例，但是可以通过console.dir发现在实例上没有在vue2中$ on这个方法去监听事件，使用利用$ parent去做兄弟组件的传参是不行的，$ root也类似

D、$ children 这个在vue3中暂时也没了

E、$ attrs，这个是包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class和style除外)。当一个组件没有声明任何 prop 时和vue2一样

F、provide/inject 基本也和vue2差不多，不仅如此还多了和这个2个差不多的组件式api；

2. 在vue2和vue3中slot

其实从vue2.6 到vue3里面关于这部分的内容，其实看文档就行了，都是差不多的