深入剖析Vue组件通讯的艺术——探索和掌握

在现代前端开发中，组件的概念已成为构建大型应用的基石。特别是在Vue.js框架中，组件间的通讯是构建动态应用的关键。今天，我们将深入探讨几种不同的组件通信方式，通过具体代码分析，理解其内在机制，并揭示这些技术如何在项目中具体应用。

defineProps 和 emits

介绍父子组件通讯前，我们要先了解一下两个工具。在 Vue 3 中，defineProps 和 emits 是用于声明组件接收的prop属性和发出的自定义事件的重要工具。这两个函数在组件的 setup 函数中使用，它们有助于提高组件的可读性和可维护性，同时提供静态类型检查和编译时的错误检测。

`defineProps`

defineProps 用来定义组件接收的 prop 属性。它应该在组件的 setup() 函数中调用，并返回一个响应式的 props 对象。

示例：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  message: {
    type: String,
    required: true,
    default: 'Hello Vue!'
  }
});
</script>

在这个例子中，message 是一个必需的字符串 prop，有一个默认值 'Hello Vue!'。你可以在模板中使用 {{ message }} 来显示这个 prop 的值。

使用 `defineEmits`

defineEmits 用来定义组件可以触发的自定义事件。它同样应该在 setup() 函数中调用，并返回一个函数对象，这个对象的每个方法对应一个可以触发的事件。

示例：

<template>
  <button @click="emitEvent">Click me!</button>
</template>

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['custom-event']);

const emitEvent = () => {
  emit('custom-event', 'This is the data for custom event');
};
</script>

在这个例子中，我们定义了一个可以触发的事件 custom-event。当按钮被点击时，emitEvent 方法被调用，触发 custom-event 并传递一些数据。

注意事项

defineProps 和 defineEmits 必须在 setup() 函数的顶部调用，以便于静态分析和类型检查。
当使用 TypeScript 时，你可以利用类型系统来更好地定义 prop 和 emit 的类型。
defineProps 返回的 props 对象是响应式的，这意味着你可以直接在模板中使用这些 prop 而不必解构它们。
defineEmits 返回的对象包含了与定义的事件同名的方法，调用这些方法即可触发事件。

使用 `defineProps` 和 `emits` 的好处

类型安全：通过定义 prop 和事件的类型，可以得到 IDE 和编辑器提供的代码补全和类型检查，减少运行时错误。
文档化：显式声明 prop 和事件提高了组件的可读性，使其他开发者更容易理解组件的期望输入和输出。
编译时检查：Vue 编译器可以在构建时检测 prop 和事件的使用是否正确，提前发现潜在的错误。

以上内容学习完毕后，接下来，让我们正式进入Vue 3的父子组件通讯的学习中。

App1.vue

<template>
  <div class="input-group">
    <input type="text" v-model="value">
    <button @click="add">添加</button>
  </div>
  <Child :msg="toChild"></Child>
</template>

<script setup>
import Child from '@/components/child.vue'
import { ref } from 'vue'

const value = ref('')
const toChild = ref('')

const add = () => {
  toChild.value = value.value
}
</script>

双向绑定与事件监听：在App1.vue中，利用v-model进行数据双向绑定和通过@click监听DOM事件，这是Vue中最常见的交互模式之一。使用ref()来响应式地跟踪输入值变化，创建了两个响应式引用value和toChild。value用于存储输入框的值，而toChild用于存储将要传递给Child组件的值。

这段代码展示了一个简单的父组件与子组件通信的例子。父组件通过v-model和按钮收集用户输入，并通过v-bind将数据传递给子组件。当用户输入并触发按钮时，输入的值会更新toChild，进而更新Child组件中的msg属性。这样的设计允许父组件和子组件之间进行数据流的控制，同时也保持了组件的解耦和重用性。

扩展观点 - 数据流与界面响应

这种实现方式非常直观且利于新手理解Vue的响应式系统。通过简单的绑定和事件处理，我们可以轻松地实现组件之间的数据传递。

`App2.vue`

接下来，我们探讨更复杂的通信模式，如在App2.vue页面中所见 :

<template>
  <Child @add1="handle"></Child>
  <div class="child">
    <ul>
      <li v-for="item in list">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
import Child from '@/components/child2.vue'
import { ref } from 'vue'

const list = ref(['html', 'css', 'js'])
const handle = (event) => {
  list.value.push(event)
}
</script>

自定义事件：在App2.vue组件中，通过自定义事件@add1，父组件可以监听子组件触发的行为，并做出相应的数据更新。这种模式在处理如用户自定义操作或跨组件的业务逻辑时显得格外有用。
数据流方向：在App1.vue中，数据是从父组件流向子组件，使用属性绑定（v-bind）传递数据。而在App2.vue中，数据是从子组件通过事件触发流向父组件，再由父组件更新数据并重新渲染。

App3.vue

<Child v-model:list="list"></Child>

  <div class="child">
    <ul>
      <li v-for="item in list">{{ item }}</li>
    </ul>
  </div>

</template>

<script setup>
import Child from '@/components/child3.vue'
import { ref } from 'vue'
const list = ref(['html', 'css', 'js'])

</script>

<style lang="css" scoped>

</style>

v-model 的高级用法：App3.vue通过v-model:list展示了Vue 3中v-model的扩展用法，能够直接绑定到一个Props属性上。这种方法使得组件的数据流更加直观和易于追踪。
数据绑定方式：在上一段代码中，数据是通过事件从子组件传递给父组件的，父组件通过事件处理器更新list数组。而在这一段代码中，数据通过v-model在父组件和子组件之间建立了双向绑定，子组件可以直接修改list的值，而父组件中的list也会自动更新，反之亦然。
子组件要求：当使用v-model时，子组件需要实现model选项，以指定属性名和事件名，这通常在子组件内部通过defineComponent或export default的props和emits选项来完成。

总结App3.vue中通过v-model提供了父组件和子组件之间更直接的双向数据绑定，简化了数据同步的过程。与通过事件传递数据的方式相比，v-model更适用于需要频繁双向更新数据的场景。

看法与展望 - 事件驱动的视角

使用自定义事件可以大大增强组件的封装性和可重用性，使得组件之间的耦合度降低，更加灵活。

App4.vue

App4.vue : <template>
  <Child ref="childRef"></Child>

  <div class="child">
    <ul>
      <li v-for="item in childRef?.list">{{ item }}</li>
    </ul>
  </div>

</template>

<script setup>
import Child from '@/components/child4.vue'
import { ref, onMounted } from 'vue'

const childRef = ref(null)

// onMounted(() => {
//   console.log(childRef.value);
// })
</script>

<style lang="css" scoped>

</style>

引用(ref)传递：在以下代码中，使用ref属性给Child组件创建了一个引用，直接访问子组件的实例及其数据。这种方式适用于那些需要从子组件中访问多个状态或方法的场景，提供了一种更紧密的组件控制方式。

<Child ref="childRef"></Child>

列表渲染：这里使用了可选链运算符?.来访问childRef的list属性，以防止childRef尚未初始化或为null时出现错误。列表渲染基于子组件Child实例的list属性，这意味着父组件直接从子组件获取数据来渲染列表。

<div class="child">
2  <ul>
3    <li v-for="item in childRef?.list">{{ item }}</li>
4  </ul>
5</div>

在App3.vue和App4.vue中，我们看到了利用v-model和ref的高级用法，这进一步扩展了组件通信的可能性，提供了双向绑定及父组件直接访问子组件状态的能力。

数据访问方式：在App3.vue中，数据通过v-model在父组件和子组件之间进行了双向绑定，父组件直接更新或读取list属性。而在App4.vue中，父组件通过ref引用子组件实例，直接访问子组件的list属性来获取数据。

代码亮点分析

封装性：每个组件都将通信细节封装在内部，对外只暴露必要的接口，这大大增强了组件的可重用性和可维护性。
响应式设计：使用 Vue的响应式系统，各组件间的数据流动自然而然，保证了UI的一致性和可预测性。
简洁的模板语法：Vue的模板语法使得定义和管理DOM事件监听器和数据绑定变得轻而易举。

代码框架分析

通过上述不同的组件定义和组件间通讯方式，结合Vue 3的Composition API，每个组件文件不仅展示了Vue的核心概念（如响应式数据、生命周期钩子等），还体现了在实际项目中如何根据不同需求选择合适的通信方式。

代码知识点片段分析

引用(refs) 与 响应式(ref) 的使用展示了Vue 3的响应式系统如何与DOM元素和组件实例交互。
自定义事件 的使用揭示了Vue组件架构中的事件驱动通信模式。
v-model的高级用法，展示了如何通过Vue的指令对命名约定实现高级自定义功能。

知识点汇总

1. App1.vue --- 父子组件通讯 --- 父组件将值v-bind绑定传给子组件，子组件使用 defineProps 接受

2. App2.vue --- 子父组件通讯 --- 借助发布订阅机制，子组件负责发布事件并携带参数，父组件订阅该事件通过事件参数获取子组价提供的值

3. App3.vue --- 子父组件通讯 --- 父组件借助v-model将数据绑定给子组件，子组件创建'update:xxx'事件，并接收到的数据修改后emits出来

4. App4.vue --- 子父组件通讯 --- 父组件通过ref获取子组件中 defineExpose() 暴露出来的数据

结尾 - 融会贯通

通读各个代码实例，我们不难发现，在Vue中处理组件通信的方法多样，每种方法都有其独特的使用场景和优势。理解这些基础概念对于任何Vue开发者来说都是必备技能。希望通过本文的分析，你能够掌握这些核心概念，并在未来的项目中灵活应用。

深入探讨Vue 3的实例——父子组件通讯