vue中的核心概念！组件化

让我看看，还有多少人写一个页面是一直往下写的？像这个样子？

我想应该没有吧？不然一个页面都得整个几千行代码了，那写的头都要炸了，如果报错了，那更是找错误都要找半天。嘶嘶嘶~ 想想都可怕。 其实我们在实际开发过程中很少一个页面写到底的，都是将一个页面划分成几块然后分别完成他。 就像搭积木，每一块积木就是一个功能单元，我们可以重复使用这些单元来快速搭建出各种各样的结构。这些积木就是我们今天要介绍的组件

组件化的基本概念

在Vue中，组件（Component）是构建用户界面的基本单位，是实现界面模块化和代码复用的核心机制。组件允许开发者将一个复杂的用户界面划分为一系列可管理的、可复用的部分。每个组件都封装了自己的视图（HTML模板）、数据（JavaScript对象）和行为（方法），并且可以在应用中多次使用，从而极大地提高了开发效率和代码的可维护性。

组件化的好处

1. 复用性：组件作为可复用的代码块，可以多次出现在同一应用的不同位置，甚至跨项目复用。这大大减少了代码重复，提升了开发效率。
2. 模块化：组件将复杂的界面分解成小的、可管理的模块，每个组件专注于完成一个特定的功能或展示一块UI，使得代码结构更加清晰，便于维护和扩展。
3. 封装性：组件封装了内部实现细节，外部只需要知道组件的接口（如Props、Slots和Emits）即可使用，这有利于保持代码的整洁和减少耦合。
4. 可维护性：由于组件是独立的单元，可以在不影响其他部分的情况下单独进行开发、测试和优化，使得维护工作更加高效。
5. 团队协作：组件化可以让团队成员并行开发，不同开发者可以同时负责不同的组件，加速开发进程，同时保持代码风格和规范的一致性。

组件的使用

基础使用

不知道是否还记得我的vue第二篇文章，了解vue的项目结构的时候，我们就在src目录下面看到了components这个目录，其实这个目录就是用来存放我们的组件。我们如果要创建一个组件，就可以在这个目录下创建一个.vue文件。我们可以在这个组件里面写入我们的HTML，JavaScript和css。

注意：我们的组件需要在我们的根组件中导入并使用它才能生效。

对了，其实App.vue也是一个组件，我们通常称之为根组件。我们可以将一个页面需要的所有的组件其实是成树状结构的，我们称之为组件树，

此时我们就可以在页面上看到一个简单的hello了。

其他的复杂页面也是如此，我们在编写一个页面的时候，先给他的功能进行划分成一个个的组件，然后在分别完成对应的组件，然后挂载到相应的父组件上就行了。

按需选择显示组件

我们在网上冲浪时，经常会看到这样的页面，就是我们在导航栏选择某一内容时，就会在这个页面显示你想要显示内容。我们想要实现这个效果就可以给我们的导航栏添加一个点击事件，传入一个参数，以确定需要显示的页面。

请看下面这个实操：我们通过点击我们想要显示的内容就可以显示我们的内容

<template>
  <nav>
    <span @click="changeTab(1)">基础知识</span> | 
    <span @click="changeTab(2)">购物车</span>  |
    <span @click="changeTab(3)">待办事项</span> 
  </nav>
  <Base v-if="state.index===1"/>
  <shopping v-if="state.index===2"/>
  <todo v-if="state.index===3"/>

</template>

<script setup>
import Base from './components/base.vue'
import shopping from './components/shopping.vue'
import todo from './components/todo.vue'
import { reactive } from 'vue';

let state = reactive({
  index:1
})
const changeTab=(i)=>{
  console.log(i);
  state.index = i;
}
</script>

<style lang="css">
*{
  text-align: center;
}
</style>

讲一下

想上传gif的，不知道为什么上传不成功。本篇文章主要介绍了一下如何使用组件，当我们使用组件后我们会发现切页面变得轻松了不少。学到这里就基本上可以做一些小demo了！期待使用vue做一个精致的小demo！