**Vue 组件基础（上）**

###什么是 Vue 组件？

在 Vue.js 中，组件（Components）是构建 UI 的基本单位。它们可以被认为是自包含的、可重用的 UI 部分。每个组件都有自己的模板、数据和方法。

### 为什么需要 Vue 组件？

Vue 组件提供了以下优势：

* **代码复用**: 组件可以被重复使用，减少代码冗余。
* **易于维护**: 每个组件都是独立的，可以单独修改或更新。
* **模块化**: 组件可以作为一个独立的模块，方便管理和维护。

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

* **模板（Template）**: 定义组件的 UI 结构。
* **数据（Data）**: 组件的状态和属性。
* **方法（Methods）**: 组件的行为和逻辑。

### 创建第一个 Vue 组件下面是一个简单的例子，创建一个名为 `HelloWorld` 的 Vue 组件：

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

<script>
export default {
 data() {
 return {
 message: 'Hello, World!'
 }
 }
}
</script>

` 标签，其内容由 `message` 数据决定。

### Vue 组件的生命周期Vue 组件有几个重要的生命周期钩子函数，可以帮助我们在组件创建、更新或销毁时执行特定的逻辑：

* **beforeCreate()**: 在组件创建之前调用。
* **created()**: 在组件创建之后调用。
* **beforeMount()**: 在组件挂载之前调用。
* **mounted()**: 在组件挂载之后调用。
* **beforeUpdate()**: 在组件更新之前调用。
* **updated()**: 在组件更新之后调用。
* **beforeDestroy()**: 在组件销毁之前调用。
* **destroyed()**: 在组件销毁之后调用。

下面是一个例子，演示了如何使用这些生命周期钩子函数：

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

<script>
export default {
 data() {
 return {
 message: 'Hello, World!'
 }
 },
 beforeCreate() {
 console.log('beforeCreate')
 },
 created() {
 console.log('created')
 },
 beforeMount() {
 console.log('beforeMount')
 },
 mounted() {
 console.log('mounted')
 },
 beforeUpdate() {
 console.log('beforeUpdate')
 },
 updated() {
 console.log('updated')
 },
 beforeDestroy() {
 console.log('beforeDestroy')
 },
 destroyed() {
 console.log('destroyed')
 }
}
</script>

在这个例子中，我们定义了一个 `HelloWorld` 组件，包含多个生命周期钩子函数。每次组件创建、更新或销毁时，都会执行相应的逻辑。

### Vue 组件的 propsVue 组件可以通过 props 接收来自父组件的数据。下面是一个例子：

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

<script>
export default {
 data() {
 return {
 message: ''
 }
 },
 props: ['message']
}
</script>

在这个例子中，我们定义了一个 `HelloWorld` 组件，包含一个 `props` 属性。该属性接收来自父组件的 `message` 数据。

### Vue 组件的 slotVue 组件可以通过 slot 接收来自父组件的内容。下面是一个例子：

html<template>
 <div>
 <slot name="header"></slot>
 <h1>{{ message }}</h1>
 <slot name="footer"></slot>
 </div>
</template>

<script>
export default {
 data() {
 return {
 message: 'Hello, World!'
 }
 }
}
</script>

在这个例子中，我们定义了一个 `HelloWorld` 组件，包含两个 slot：`header` 和 `footer`。父组件可以通过这些 slot 接收内容。

### Vue 组件的 emitVue 组件可以通过 emit 发送事件给父组件。下面是一个例子：

html<template>
 <div>
 <button @click="handleClick">点击</button>
 </div>
</template>

<script>
export default {
 methods: {
 handleClick() {
 this.$emit('click')
 }
 }
}
</script>

在这个例子中，我们定义了一个 `HelloWorld` 组件，包含一个 `handleClick` 方法。该方法通过 emit 发送一个 `click`事件给父组件。

### 总结Vue 组件是构建 UI 的基本单位，可以被重复使用、易于维护和模块化。每个组件都有自己的模板、数据和方法。生命周期钩子函数可以帮助我们在组件创建、更新或销毁时执行特定的逻辑。props 和 slot 可以帮助我们接收来自父组件的数据和内容。emit 可以帮助我们发送事件给父组件。

### 参考* [Vue.js 文档]( />* [Vue 组件文档](

上一条：vue 升级3 +vite+antdv4

下一条：SQL篇-03_SQL必知必会-02_排序检索数据