Vue 中什么是组件？

在 Vue 中，组件是 Vue 应用程序的基本构建块，用于封装可复用的代码块。组件可以看作是自定义元素，具有自己的模板、数据、方法和生命周期钩子，可以被多次复用。

1. 组件化开发：Vue 的组件化开发方式允许开发者将复杂的 UI 划分为独立、可复用的组件。每个组件可以包含 HTML 模板、JavaScript 代码和样式，使得代码更加模块化和可维护。

2. 封装功能：组件允许开发者封装特定功能或UI，并在应用中多次重复使用。例如，按钮、导航栏、模态框等都可以作为组件进行封装。

3. 通信：组件之间可以通过 props（属性）和事件进行通信。父组件可以通过 props 向子组件传递数据，子组件则通过事件触发来通知父组件。

4. 生命周期：每个组件都有自己的生命周期，包括创建、挂载、更新和销毁等阶段，在这些阶段可以执行特定的逻辑和操作。

示例一个简单的 Vue 组件：

<template>
  <div>
    <h1>{{ greeting }}</h1>
    <button @click="updateGreeting">Update Greeting</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Hello, Vue!'
    };
  },
  methods: {
    updateGreeting() {
      this.greeting = 'Hola, Vue!';
    }
  }
};
</script>

<style>
/* 样式 */
</style>

以上代码展示了一个简单的 Vue 组件，它包含了模板（template）、JavaScript 代码（script）和样式（style）。这个组件定义了一个 greeting 数据属性和一个 updateGreeting 方法，通过点击按钮更新问候语。