在前面两篇中，我们了解了 Vue 的基础语法和数据绑定。在这一篇中，我们将深入学习 Vue 的核心功能之一：组件。组件是 Vue 项目中最重要的概念，它可以帮助我们将页面拆分成可复用的模块，提高开发效率。
1. 什么是组件？
Vue 组件是可复用的独立单元，它可以包含 HTML、CSS 和 JavaScript 代码。通过组件化，我们可以将复杂的页面拆分成多个简单的部分，每个部分对应一个组件。
在 Vue 项目中，组件分为两种：
- 全局组件： 在整个项目中都可以使用的组件。
- 局部组件： 只能在特定的父组件中使用。
2. 创建第一个组件
在 Vue 项目中，组件通常放在 src/components 目录下。我们来创建一个名为 HelloWorld.vue 的组件。
步骤1：创建组件文件
在 src/components 目录下创建 HelloWorld.vue 文件，并添加以下代码：
<template>
<div>
<h2>{{ message }}</h2>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
message: "Hello, Vue Component!"
};
}
};
</script>
<style scoped>
h2 {
color: blue;
text-align: center;
}
</style>解释：
<template>：定义组件的 HTML 结构。<script>：定义组件的逻辑代码。<style scoped>：定义组件的样式，scoped表示样式只在当前组件中生效。
步骤2：引入组件到 App.vue
在 src/App.vue 文件中引入并注册组件：
<template>
<div>
<h1>组件示例</h1>
<HelloWorld />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {
HelloWorld
}
};
</script>
<style>
h1 {
text-align: center;
margin-top: 20px;
}
</style>在浏览器中运行项目，页面会显示 “Hello, Vue Component!”。
3. 父子组件通信
在 Vue 中，父组件和子组件之间可以通过 props 和 事件 进行通信。
（1）使用 props 传递数据
父组件通过 props 将数据传递给子组件。
修改 HelloWorld.vue 文件：
<template>
<div>
<h2>{{ title }}</h2>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
title: {
type: String,
required: true
}
}
};
</script>修改 App.vue 文件：
<template>
<div>
<HelloWorld title="来自父组件的标题" />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {
HelloWorld
}
};
</script>在这里，父组件通过 title 属性向子组件传递数据。
（2）使用事件传递数据给父组件
子组件可以通过 $emit 触发事件，向父组件传递数据。
修改 HelloWorld.vue 文件：
<template>
<div>
<button @click="sendMessage">发送消息给父组件</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
methods: {
sendMessage() {
this.$emit("send-message", "来自子组件的数据");
}
}
};
</script>修改 App.vue 文件：
<template>
<div>
<HelloWorld @send-message="receiveMessage" />
<p>父组件接收到的数据：{{ message }}</p>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {
HelloWorld
},
data() {
return {
message: ""
};
},
methods: {
receiveMessage(data) {
this.message = data;
}
}
};
</script>点击子组件的按钮，父组件就能接收到子组件传递的数据。
4. 总结
在这一篇中，你学习了：
- 如何创建和使用 Vue 组件。
- 父子组件之间如何通过
props和事件进行通信。
下一篇中，我们将继续学习 Vue 的核心功能，包括组件的内容分发和生命周期钩子。
