【Vue3 ✨】Vue3 入门之旅 · 第四篇：组件的创建与传递数据

本篇文章将介绍 Vue3 中的 组件基础。我们将带你了解如何在 Vue3 中创建组件，如何通过 props 传递数据，并且如何使用 emit 来实现父子组件间的通信。

---

目录

1. Vue3 组件概述
2. 创建 Vue3 组件
3. 使用 Props 传递数据
4. 通过 Emit 实现父子组件通信
5. 组件的插槽（Slots）
6. 小结

---

Vue3 组件概述

在 Vue3 中，组件 是构建应用的核心。组件帮助我们将应用拆分成更小的、可复用的部分，提升了代码的可维护性和复用性。每个组件本质上是一个 Vue 实例，包含了 数据、方法、生命周期钩子 等。

Vue3 提供了两种创建组件的方式：Options API 和 Composition API。本篇将着重讲解 Composition API 下如何创建和使用组件，并通过 props 和 emit 实现父子组件之间的数据传递与通信。

---

创建 Vue3 组件

在 Vue3 中，组件可以通过 defineComponent 或 script setup 来定义。这里我们重点讲解通过 script setup 的方式来创建组件，这种方式更加简洁和直观。

1. 创建一个简单组件

<template><div><p>{{ message }}</p></div>
</template><script setup>
import { ref } from 'vue';const message = ref('Hello from Vue3 component!');
</script>

在上面的代码中，我们通过 ref 创建了一个响应式的变量 message，并在模板中通过插值语法 {{ message }} 渲染该变量的值。

2. 组件的导入与使用

可以将该组件保存为 HelloWorld.vue，然后在父组件中导入并使用：

<template><HelloWorld />
</template><script setup>
import HelloWorld from './components/HelloWorld.vue';
</script>

---

使用 Props 传递数据

Vue3 中的 props 允许父组件向子组件传递数据。通过 props，子组件可以接收到父组件传递的动态数据。

1. 父组件传递数据

<!-- Parent.vue -->
<template><Child :message="parentMessage" />
</template><script setup>
import { ref } from 'vue';
import Child from './Child.vue';const parentMessage = ref('Hello from Parent!');
</script>

2. 子组件接收数据

<!-- Child.vue -->
<template><div><p>{{ message }}</p></div>
</template><script setup>
import { defineProps } from 'vue';const props = defineProps({message: String
});
</script>

在这个例子中，父组件通过 :message 将数据传递给子组件，而子组件通过 defineProps 接收该数据。

---

通过 Emit 实现父子组件通信

Emit 是 Vue3 提供的一种机制，用于实现子组件向父组件传递事件。这种方式通常用于子组件向父组件发送通知，或者更新父组件中的数据。

1. 子组件触发事件

<!-- Child.vue -->
<template><button @click="sendMessage">Send Message</button>
</template><script setup>
import { defineEmits } from 'vue';const emit = defineEmits();const sendMessage = () => {emit('messageSent', 'Hello from Child!');
};
</script>

2. 父组件接收事件

<!-- Parent.vue -->
<template><Child @messageSent="handleMessage" />
</template><script setup>
import { ref } from 'vue';
import Child from './Child.vue';const message = ref('');const handleMessage = (msg) => {message.value = msg;
};
</script>

在上面的例子中，父组件通过 @messageSent 监听子组件触发的 messageSent 事件，当事件触发时，父组件的 handleMessage 方法会被调用。

---

组件的插槽（Slots）

Vue3 支持 插槽，让你能够在组件内部插入内容。插槽通常用于在组件中提供一个可自定义的区域，父组件可以插入任意内容到子组件中。

1. 默认插槽

<!-- Parent.vue -->
<template><Child><p>This is content passed from parent!</p></Child>
</template><script setup>
import Child from './Child.vue';
</script>

<!-- Child.vue -->
<template><div><slot></slot></div>
</template>

在这个例子中，父组件通过 <slot></slot> 将内容传递给子组件，子组件通过 <slot> 渲染传入的内容。

2. 具名插槽

<!-- Parent.vue -->
<template><Child><template #header><h1>This is the header</h1></template><template #footer><p>This is the footer</p></template></Child>
</template><script setup>
import Child from './Child.vue';
</script>

<!-- Child.vue -->
<template><div><header><slot name="header"></slot></header><footer><slot name="footer"></slot></footer></div>
</template>

---

小结

在本篇文章中，我们学习了 Vue3 中的 组件基础，包括如何创建组件、如何通过 props 向子组件传递数据、如何通过 emit 实现父子组件之间的通信，以及如何使用插槽自定义组件的内容。掌握这些基础，将帮助你更加高效地构建 Vue3 应用。

在接下来的文章中，我们将探讨 Vue3 生命周期与钩子函数，带你深入了解 Vue3 的生命周期管理和钩子函数的使用。

---

📘 下一篇，我们将介绍 Vue3 生命周期与钩子函数，并深入探讨如何在 Vue3 中管理组件的生命周期。