Vue是一套构建用户界面的渐进式框架，常用于构建单页面应用

学习总结

1、掌握 JAVA入门到进阶知识(持续写作中……）
2、学会Oracle数据库入门到入土用法(创作中……）
3、手把手教你开发炫酷的vbs脚本制作(完善中……）
4、牛逼哄哄的 IDEA编程利器技巧(编写中……）
5、面经吐血整理的面试技巧(更新中……）

在这里插入图片描述 Vue是一套构建用户界面的渐进式框架，常用于构建单页面应用（SPAs）和交互式界面。Vue组件是Vue框架中的关键抽象，它们允许开发者通过一个独立和可复用的单元为用户界面构建部件。以下是对Vue组件用法的详细介绍：

一、Vue组件的基础概念

组件的定义：组件（Component）是Vue最强大的功能之一，它扩展了HTML元素，封装了可重用的代码。组件系统使得开发者可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。
组件的作用：
- 提高可维护性：将应用拆分成多个小的组件，使得每个组件的功能相对单一，易于理解和修改。当应用的某个部分出现问题时，可以快速定位到相应的组件进行修复。
- 可复用性：一旦创建了一个组件，可以在不同的地方重复使用，减少代码重复。例如，一个通用的输入框组件可以在多个页面中使用。
- 团队协作：不同的开发人员可以同时开发不同的组件，提高开发效率。
组件的分类：
- 全局组件：在Vue实例创建之前使用Vue.component()方法进行注册，可以在整个Vue应用中使用。
- 局部组件：在需要使用的地方通过components属性进行注册，只能在特定的组件内部使用。

二、创建和注册组件

单文件组件（SFC）：单文件组件是Vue中推荐的组件编写方式，它将一个组件的模板、脚本和样式写在一个以.vue为后缀的文件中。
全局组件注册：使用Vue.component()方法进行全局注册。例如：

Vue.component('MyGlobalComponent', {
  template: '<div>Global Component</div>'
});

或者在使用Vue 3时，可以通过createApp实例的component方法进行注册：

import { createApp } from 'vue';
import MyGlobalComponent from './MyGlobalComponent.vue';

const app = createApp(App);
app.component('MyGlobalComponent', MyGlobalComponent);
app.mount('#app');

局部组件注册：在需要使用的地方通过components属性进行注册。例如：

import MyLocalComponent from './MyLocalComponent.vue';

const App = {
  components: {
    'MyLocalComponent': MyLocalComponent
  }
};

三、组件的命名格式

组件的命名可以使用驼峰式命名法或短横线分隔命名法。在注册组件时，需要保持命名的一致性。例如：

// 驼峰式命名
const MyComponent = { /*...*/ };
Vue.component('MyComponent', MyComponent);

// 短横线分隔命名
const myComponent = { /*...*/ };
Vue.component('my-component', myComponent);

四、组件的组成结构

Vue组件通常包含以下部分：

template：定义了组件的结构和内容。
script：包含组件的逻辑，如数据、方法和生命周期钩子。
style：定义了组件的样式，可以使用Scoped CSS来确保样式仅作用于当前组件。

五、组件的使用

在模板中使用组件：在HTML模板中使用自定义的组件标签，像使用普通HTML标签一样，将组件标签插入到所需位置。
组件的数据传递：
- props：父组件通过props向子组件传递数据。子组件需要显式地用props选项声明“prop”。
- 事件：子组件通过事件向父组件发送消息，使用this.$emit()方法触发自定义事件。
插槽（Slots）：插槽允许组件模板中包含可替换的内容，使得子组件可以插入内容到父组件。