Vue 组件基础

Vue 是一个用于构建用户界面的渐进式 JavaScript 框架，它允许你通过组件（Component）的方式组织代码。Vue 组件是可复用的 Vue 实例，具有自己的模板、数据、方法和生命周期钩子等。

---

## 🧱 一、Vue 组件基础概念

### 1. **组件是什么？**

组件是一个可复用的 Vue 实例，它封装了 HTML、CSS 和 JavaScript，可以像普通 HTML 标签一样使用。

例如：

```html
<my-component></my-component>
```

### 2. **组件的定义方式**

在 Vue 中，你可以通过 `Vue.component()` 全局注册组件，也可以在某个 Vue 实例中局部注册组件。

#### 全局注册（适用于多个地方使用）

```javascript
Vue.component('my-component', {
  template: '<div>这是一个组件</div>'
})
```

#### 局部注册（只在当前实例中可用）

```javascript
new Vue({
  el: '#app',
  components: {
    'my-component': {
      template: '<div>这是局部组件</div>'
    }
  }
})
```

---

## 🧩 二、组件的基本结构

一个基本的 Vue 组件通常包含以下几个部分：

```javascript
{
  // 模板（HTML）
  template: `<div>{{ message }}</div>`,

// 数据（响应式数据）
  data() {
    return {
      message: 'Hello from component!'
    }
  },

// 方法
  methods: {
    greet() {
      alert(this.message)
    }
  },

// 生命周期钩子
  mounted() {
    console.log('组件已挂载')
  }
}
```

---

## 📦 三、组件通信（父子组件之间）

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

- 父组件通过 `props` 向子组件传递数据。
- 子组件通过 `props` 接收数据。

#### 父组件：

```html
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: '来自父组件的数据'
    }
  }
}
</script>
```

#### 子组件（ChildComponent.vue）：

```html
<template>
  <div>{{ message }}</div>
</template>

---

### 2. **子组件向父组件传递数据（$emit）**

- 子组件通过 `$emit` 触发事件，父组件监听该事件并处理。

#### 子组件：

```html
<template>
  <button @click="sendData">发送数据</button>
</template>

#### 父组件：

```html
<template>
  <child-component @data-sent="handleData"></child-component>
</template>

---

## 🔄 四、组件的生命周期钩子

Vue 组件有以下生命周期钩子：

| 钩子函数 | 描述 |
|----------|------|
| `beforeCreate` | 实例刚被创建，数据未初始化 |
| `created` | 实例已经创建完成，数据已初始化 |
| `beforeMount` | 模板编译前 |
| `mounted` | 模板渲染完成，可以访问 DOM |
| `beforeUpdate` | 数据更新前 |
| `updated` | 数据更新后 |
| `beforeDestroy` | 实例销毁前 |
| `destroyed` | 实例销毁后 |

示例：

```javascript
export default {
  mounted() {
    console.log('组件已挂载')
  },
  beforeDestroy() {
    console.log('组件即将销毁')
  }
}
```

---

## 🎨 五、组件的样式作用域（scoped styles）

如果你希望组件的样式只作用于当前组件，可以使用 `scoped`：

```html
<style scoped>
.my-class {
  color: red;
}
</style>
```

这样，样式只会影响当前组件中的元素，不会影响其他组件。

---

## 🧰 六、组件命名规范

- **PascalCase**：适用于 Vue 单文件组件（如 `MyComponent.vue`），在模板中使用 `MyComponent`。
- **kebab-case**：适用于 HTML 模板中使用（如 `<my-component>`）。

---

## ✅ 总结

| 内容 | 说明 |
|------|------|
| 组件 | 可复用的 Vue 实例 |
| 注册方式 | 全局 / 局部 |
| 通信方式 | props（父传子）、$emit（子传父） |
| 生命周期 | created, mounted, updated, destroyed 等 |
| 样式作用域 | 使用 `scoped` 防止样式污染 |
| 命名规范 | PascalCase / kebab-case |

---

如果你需要我帮你写一个具体的组件示例或者讲解更深入的内容，随时告诉我！😊