【JavaScript源代码】vue3 父子组件传值详解.docx

vue3 父子组件传值详解 　　现在距离vue3的诞生已经过了很长时间了，笔者也是近期才开始学习vue3。对比vue2来看，vue3在写法发生了不小的变化，最典型的例子就是vue3通过ref，或者reactive实现数据的响应式。因为ref和reactive的出现，使得vue3中父子组件的传值方式也发生了变化　　咱们先看下vue2中的写法　　父组件：　　<!-- 父组件 -->　　<template>　　  <div>　　    <children :title="title" @getChildren="getChildren"></children>　　    <div>子组件说： {{ Vue3 父子组件之间的通信是 Vue.js 开发中非常关键的一部分，相较于 Vue2，Vue3 在数据处理和响应式系统上进行了重大改进。在 Vue2 中，我们主要依赖 `props` 从父组件向子组件传递数据，并通过 `this.$emit` 事件触发器从子组件向父组件发送消息。而在 Vue3 中，由于采用了Composition API，这种通信方式有了新的变化。 让我们回顾一下 Vue2 中的父子组件通信方式。在 Vue2 中，父组件通过 `props` 向子组件传递数据，如示例中的 `title` 属性。子组件通过监听自定义事件（如 `@getChildren`）并调用 `this.$emit` 来向父组件发送数据，如 `askToFather` 方法所示。 Vue3 中，引入了 `ref` 和 `reactive` 这两个核心概念，它们是响应式系统的基石。`ref` 用于创建一个响应式的引用，而 `reactive` 用于创建一个响应式的对象。在 Vue3 的父子组件通信中，这两个工具起到了关键作用。 在Vue3的父组件中，我们可以看到 `msg` 使用 `ref` 创建了一个响应式变量，然后将其作为 `props` 传递给子组件。同时，父组件定义了一个方法 `listenToChildren`，该方法接收来自子组件的参数 `val`，并将这个值赋给 `children_msg.value`，从而实现数据的更新。 子组件在 Vue3 中的结构也有所变化。在 `setup` 函数中，不再有 `this` 对象，而是通过 `props` 直接接收父组件传递的值。子组件想要向父组件发送数据时，不再使用 `this.$emit`，而是通过 `emit` 函数来触发事件，例如 `emit('listen', askMsg)`。 Vue3 的 `setup` 函数是新引入的一个生命周期钩子，它在组件实例被创建之前运行，并且可以访问到 `props` 和 `context`。`props` 参数包含了父组件传递的所有属性，而 `context` 包含了 `slots`, `emit` 等信息，`emit` 函数正是用来替代 `this.$emit` 的。 总结起来，Vue3 中父子组件的通信方式主要有以下几点变化： 1. 父组件通过 `props` 依然向子组件传递数据，但响应式变量通常通过 `ref` 或 `reactive` 创建。 2. 子组件不再通过 `this` 访问属性或方法，而是通过 `props` 和 `setup` 函数内部的参数直接访问。 3. 子组件向父组件发送数据时，不再使用 `this.$emit`，而是使用 `emit` 函数，这个函数在 `setup` 函数内可用。 4. 父组件接收子组件传递的数据时，通常会使用 `ref` 创建的响应式变量，并通过赋值操作来更新状态。 理解这些变化对于适应 Vue3 的开发至关重要，它允许开发者更加灵活地组织和管理组件的状态，同时也提高了代码的可读性和可维护性。