VUE3 常用的组件介绍

news2025/1/12 9:17:12

Vue 组件简介

Vue 组件是构建 Vue 应用程序的核心部分，组件帮助我们将 UI 分解为独立的、可复用的块，每个组件都有自己的状态和行为。Vue 组件通常由模板、脚本和样式组成。组件的脚本部分包含了各种配置选项，用于定义组件的逻辑和功能。

组件的常见选项及其描述

data
- 描述：data 选项用于定义组件的响应式数据。它是一个函数，返回一个对象，这个对象包含了该组件的初始状态。
- 示例：
```
data() {
  return {
    message: 'Hello, Vue!'
  };
}
```
methods
- 描述：methods 选项用于定义组件的方法，方法可以在模板中通过事件绑定进行调用。它们通常用于处理用户输入、事件响应或其他操作。
- 示例：
```
methods: {
  greet() {
    console.log(this.message);
  }
}
```
computed
- 描述：computed 选项用于定义计算属性，它是基于响应式数据进行计算的，并且只有在依赖的响应式数据发生变化时才会重新计算。它们常用于根据已有数据衍生出新的数据。
- 示例：
```
computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}
```
watch
- 描述：watch 选项用于监听响应式数据的变化，可以在数据变化时执行某些操作，比如异步操作或调试。watch 是响应式数据的“观察者”。
- 示例：
```
watch: {
  message(newValue, oldValue) {
    console.log(`Message changed from ${oldValue} to ${newValue}`);
  }
}
```
props
- 描述：props 选项用于从父组件传递数据到子组件。它定义了父组件传递给子组件的属性，可以用于传递基本数据类型或对象。
- 示例：
```
props: {
  title: String
}
```
created
- 描述：created 是生命周期钩子之一，组件实例在创建后立即被调用，此时数据已初始化，但 DOM 尚未挂载。
- 示例：
```
created() {
  console.log('Component created');
}
```
mounted
- 描述：mounted 是生命周期钩子之一，组件实例被挂载到 DOM 后立即被调用。在这个阶段，可以访问到 DOM 元素。
- 示例：
```
mounted() {
  console.log('Component mounted');
}
```
beforeDestroy
- 描述：beforeDestroy 是生命周期钩子之一，在组件实例销毁之前调用。此时，组件仍然处于 DOM 中。
- 示例：
```
beforeDestroy() {
  console.log('Component about to be destroyed');
}
```
destroyed
- 描述：destroyed 是生命周期钩子之一，在组件实例销毁后立即调用。此时，组件从 DOM 中移除。
- 示例：
```
destroyed() {
  console.log('Component destroyed');
}
```
emits
- 描述：emits 用于声明组件会触发的自定义事件。通过这个选项可以限制和验证组件能够触发的事件。
- 示例：
```
emits: ['update', 'submit']
```
inheritAttrs
- 描述：inheritAttrs 选项控制是否自动将父组件传递的属性绑定到子组件的根元素上。设置为 false 时，可以自定义如何传递属性。
- 示例：
```
inheritAttrs: false
```
name
- 描述：name 用于给组件指定一个名称，通常用于调试或递归组件时。
- 示例：
```
name: 'MyComponent'
```
directives
- 描述：directives 选项用于定义自定义指令。Vue 允许通过 directives 选项注册全局或局部指令。
- 示例：
```
directives: {
  focus: {
    inserted(el) {
      el.focus();
    }
  }
}
```
provide 和 inject
- 描述：provide 和 inject 用于父子组件之间的跨级数据传递。provide 在父组件中定义，inject 在子组件中使用。它们允许跨越多级组件传递数据而不必一层层通过 props。
- 示例：
```
provide() {
  return {
    message: 'Hello from parent'
  };
}

inject: ['message']
```