Vue 3 组件通信：从基础到实践

Vue 3 组件通信：从基础到实践

1. 组件通信是什么？

组件通信是指在 Vue 应用中，组件之间如何传递数据和消息。在构建复杂应用时，组件之间可能会有父子关系、兄弟关系或更复杂的嵌套关系。组件通信是实现组件间协作的关键。

2. 组件通信的场景

假设你有一个应用，包含多个组件，如 A、B 和 C，它们之间可能需要共享数据或触发某些操作。例如：

• 父组件 A 需要将数据传递给子组件 B。

• 子组件 B 需要将数据传递回父组件 A。

• 组件 B 和组件 C 之间需要共享数据。

3. 使用 props 实现父子通信

props 是 Vue 中实现父子组件通信的常用方式。它允许父组件将数据传递给子组件，并且可以实现子组件向父组件传递数据（通过函数回调）。

父子通信的实现步骤

1. 父组件向子组件传递数据（父传子）

• 父组件通过 props 将数据传递给子组件。

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

1. 子组件向父组件传递数据（子传父）

• 父组件向子组件传递一个回调函数。

• 子组件在需要时调用这个回调函数，并传递数据。

示例代码

父组件（Father.vue）

<template>
  <div>
    <h4>父组件的汽车：{{ car }}</h4>
    <Child :car="car" :sendToy="getToy" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Child from './Child.vue';

const car = ref('奔驰');
const toy = ref(null);

function getToy(value) {
  toy.value = value;
}
</script>

子组件（Child.vue）

<template>
  <div>
    <h4>子组件的玩具：{{ toy }}</h4>
    <h4>父组件给的汽车：{{ car }}</h4>
    <button @click="sendToy">把玩具给父亲</button>
  </div>
</template>

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

const props = defineProps({
  car: String,
  sendToy: Function
});

const toy = '奥特曼';

function sendToy() {
  props.sendToy(toy);
}
</script>

运行效果

• 父组件显示自己的汽车（奔驰）。

• 子组件显示自己的玩具（奥特曼）和父组件传递的汽车（奔驰）。

• 点击按钮后，子组件将玩具传递给父组件，父组件接收并显示。

4. 组件通信的组织方式

为了更高效地讲解和学习组件通信，可以使用 Vue Router 来组织页面结构。每个通信方式可以对应一个路由页面，方便切换和学习。

项目结构

1. pages 文件夹：包含每个通信方式的示例页面。

• 01-props.vue：演示 props 的使用。

• 02-events.vue：演示自定义事件的使用。

• 03-v-model.vue：演示 v-model 的使用。

• 其他通信方式……

1. router/index.ts：定义路由规则，将每个页面映射到一个路由路径。

示例代码

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import Props from '@/pages/01-props.vue';
import Events from '@/pages/02-events.vue';
import VModel from '@/pages/03-v-model.vue';

const routes = [
  { path: '/props', component: Props },
  { path: '/events', component: Events },
  { path: '/v-model', component: VModel }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

5. 注意事项

1. props 的使用场景：

• props 适合父子组件之间的直接通信。

• 避免在多层嵌套组件中逐层传递 props，这会导致代码复杂且难以维护。

1. 代码组织：

• 使用路由和页面结构来组织代码，可以提高学习和开发效率。

• 将每个通信方式的示例放在单独的页面中，方便切换和查看。

1. 性能优化：

• 避免不必要的数据传递和组件更新。

• 使用 v-if 或 v-show 条件渲染来优化性能。

6. 总结

组件通信是 Vue 开发中的重要概念，掌握 props 的使用可以帮助你实现父子组件之间的数据传递。通过路由和页面结构来组织代码，可以更高效地学习和实践组件通信的多种方式。