vue3和vue2父子组件互相通信的方式和原理

一、背景介绍

在Vue框架中，父子组件之间的数据传递是一个核心功能，它允许组件之间进行有效的通信和数据共享。随着Vue 3的发布，父子组件之间的传值方式发生了一些变化，同时也带来了一些新的特性和改进。本文将详细总结Vue 3与Vue 2在父子组件传值方面的区别和原理。

二、Vue 2父子组件传值

在Vue 2中，父子组件之间的数据传递主要依赖props和自定义事件。

‌父传子（Props）‌：

• 父组件通过属性（attributes）的方式将数据传递给子组件。

• 子组件通过props接收这些数据。

• 数据是单向流动的，子组件不能直接修改父组件传递的数据。

• 具体使用：

‌子传父（自定义事件）‌：

• 子组件通过this.$emit方法触发自定义事件，并将数据作为参数传递给父组件。

• 父组件通过监听这些自定义事件来接收子组件传递的数据。

• 具体使用：

  父调用子方法‌：

• 父组件通过ref引用子组件实例，然后直接调用子组件的方法

• 具体使用：

三、Vue 3父子组件传值

Vue 3在保持Vue 2核心传值机制的基础上，引入了Composition API，并对父子组件之间的传值与调用方法进行了优化和改进。

‌父传子（Props）‌：

• 父组件通过属性（attributes）的方式将数据传递给子组件的方式没有改变。

• 子组件通过defineProps（在

‌子传父（自定义事件）‌：

• 子组件通过defineEmits（在

  父调用子方法‌：

• 父组件通过ref引用子组件实例，然后直接调用子组件的方法。

• Vue 3中的ref和reactive等响应式API提供了更灵活的组件状态管理。

• 在Vue 3中，defineExpose方法用于显式地声明子组件中哪些方法或属性应该被父组件访问，这有助于避免不必要的属性暴露，提高组件的封装性。

• 具体使用：

四、区别与原理

1.API差异‌：

• Vue 2使用props选项来接收数据，使用this.$emit来触发事件。

• Vue 3引入了Composition API，提供了defineProps和defineEmits来更简洁地处理props和自定义事件。

2.响应式系统‌：

• Vue 2使用Object.defineProperty来实现响应式数据绑定。

• Vue 3使用Proxy对象来实现更高效的响应式数据绑定，这在一定程度上影响了父子组件之间数据传递的性能和灵活性。

‌3.组件通信的灵活性‌：

• Vue 3通过引入provide和inject机制，允许跨层级的组件通信，这在处理复杂组件树时非常有用。

• 在Vue 2中，跨层级的组件通信通常需要使用事件总线（Event Bus）或Vuex等状态管理库来实现。

4.TypeScript支持‌：

• Vue 3对TypeScript提供了更好的支持，defineProps和defineEmits可以与TypeScript的类型系统紧密结合，提供更强的类型检查和代码提示。

五、结论

Vue 3在父子组件传值方面保留了Vue 2的核心机制，同时引入了一些新的特性和改进，使得组件之间的通信更加灵活和高效。随着Composition API的引入，Vue 3的API设计更加简洁和直观，同时也为TypeScript用户提供了更好的支持。无论是Vue 2还是Vue 3，父子组件之间的数据传递都是构建复杂Vue应用的基础，理解其原理和差异对于开发者来说至关重要。