vue组件式开发基础

基本介绍

组件 允许我们把我们的UI界面一个个划分为独立的，可重用的部分,并且我们可以对每一个部分单独的进行设计和操作。在实际的应用当中，组件常常会被设计成为层层嵌套的树状结构：

这就如同我们嵌套的HTML元素的方式类似，我们可以通过Vue组件实现自己的对应的模块，组件模型，我们可以在每个组件内封装自定义的内容和逻辑。

我们常常将一些页面的公共功能或者逻辑，或者需要在多个页面使用的模块封装成一个组件，以此方便我们的开发。

自此，我们就可以实现由 DOM树 升级为 组件树 的开发方式,我们也可以对组件进行复用！同时维护方面也得到便利，我们只需要维护对应组件，而不是集合在一起的一大堆代码。

一、项目准备

1、首先，我们使用vite脚手架安装一个项目,在终端使用：

npm init vite

2、项目名任意

3、选择vue再选择JavaScript

装好之后，我们就得到了一个项目文件，进入到项目文件当中：

4、安装依赖 终端输入：

npm i

到这里，我们的项目就安装成功啦！我们可以在终端使用npm run dev运行项目啦！

当然，一些官方封装的内容我们需要手动去除，大家可以看我这篇文件，把需要手动去除的部分去掉：[Vue] vue-router路由单页面应用开发 – 掘金 (juejin.cn)

二、vue组件基础

实现一个组件

首先，我们来到components目录下！这个目录是我们存放组件的位置，当然你也可以将组件存放在其他位置，或者自己定义的文件名。

​ 新建一个Rate.vue 文件，接下来，我们就可以将我们需要的逻辑放入这个文件当中!

​ 例如：我们想要实现这里显示一个带颜色的模块

<!-- Rate.vue  -->
<template>
    <div class="rate">
    </div>
</template>

<script setup>

</script>

<style scoped>
.rate{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgb(0, 238, 255);
}
</style>

​ 写好之后，我们要如何将这个组件放到我们的页面上来使用呢？？

​ 接下来，来到App.vue文件

​ 要想使用一个子组件，我们需要在父组件中导入它。这里App.vue就是父组件，Rate.vue就是子组件

<!-- App.vue -->
<script setup>
import Rate from './components/Rate.vue'//这里就是子组件的引入
</script>

<template>
  <div>
    <h1>hello world</h1>
  </div>
  <!-- 子组件的使用 -->
  <Rate />
</template>

<style scoped>

</style>

是不是很简单呢？到这里，你就明白了组件如何定义和使用。

接下来，我们就来学习一个重要的点！父子组件通信！

三、父子组件基础及父子组件通信基础

接下来，我们就了解一下父子组件的基础，我们在components目录下声明以下组件

• JAdver.vue
• JHead.vue
• JMain.vue
• JSide.vue
• Item.vue

实现一个基础的组件模板！并且在App.vue中装载这些组件！(熟悉一下基本操作即可)

<!-- App.vue -->
<script setup>
//这里就是子组件的引入
import JHead from './components/JHead.vue'
import JMain from './components/JMain.vue'
import JSide from './components/JSide.vue'
import JAdver from './components/JAdver.vue'
</script>

<template>
  <!-- 子组件的使用 -->
  <div class="header">
    <JHead/>
  </div>
  <div class="body">
    <div class="aside"><JSide /></div>

    <div class="main"><JMain /></div>
    
    <div class="right"><JAdver /></div>
  </div>
</template>

接下来我们需要对各个组件进行开发！

重点部分

我们主要介绍JMain.vue 和 Item.vue 这一对父子组件

JMain.vue

<template>
    <div>
        JMain
        <div v-for="user in users">
            <Item  :users="user"/>
        </div>
        
    </div>
</template>

<script setup>
    import {ref} from 'vue'
    import Item from './Item.vue'
    // 提供数据，做一个模型层
    let users = ref(['美羊羊','喜羊羊','沸羊羊'])
    setTimeout(()=>{
        users.value = [...users.value,'懒羊羊']
    },2000)
</script>

Item.vue

<template>
    <div>
       大肥羊村:{{ users }}
    </div>
</template>

<script setup>
// defineProps api 获取父组件传过来的参数
import { defineProps } from 'vue';
 const {users} = defineProps(['users'])
</script>

父子组件关系基础

我们在JMain.vue中使用了Item.vue 组件，也就是说Item.vue为JMain.vue提供它一个服务,它们这种组件关系就属于父子组件关系！

父子组件：父子组件关系是指在组件化开发中，存在一个层次结构，其中一个组件被视为另一个组件的父组件，而另一个组件则是其子组件。这种层次结构使得组件之间能够通过 props 和事件进行通信，从而构建更灵活、可维护的应用程序。

父组件：

• 定义和渲染：父组件是包含子组件的组件。它通常负责整体页面的结构和逻辑。在父组件的模板中，可以使用子组件的标签进行渲染。
• 传递数据（Props）：父组件可以通过 props 将数据传递给子组件。这样，子组件可以接收并使用这些数据。
• 接收事件：父组件也可以监听子组件触发的事件，并作出相应的响应。

子组件：

• 接收 Props：子组件通过 props 选项声明接收的属性，以便从父组件接收数据。
• 触发事件：子组件可以通过 $emit 方法触发自定义事件，将信息传递给父组件。
• 不直接修改 Props：子组件不应直接修改通过 props 传递过来的数据，而是应该通过触发事件的方式通知父组件需要的变化。

通信和协同工作：

• Props 和 Events：父子组件之间主要通过 props 将数据从父传递给子，通过自定义事件将信息从子传递给父。这种单向数据流确保了数据流动的可预测性和可维护性。
• Vuex：在复杂的应用中，可以使用 Vuex 这样的状态管理工具，将状态提升到全局，以便多个组件之间更方便地进行通信。

父子组件通信基础

分析组件：在JMain.vue 中，我们导入了Item.vue组件，并应用于我们的页面，同时将这个子组件放入一个div盒子当中，使用v-for读取数据源中的数据，并且 使用:users="user"将名为users的数据以属性props的方式传递给子组件。

props属性：在Vue.js中，props 是一种用于从父组件向子组件传递数据的机制。通过props，父组件可以向子组件传递数据，使得子组件能够接收并使用这些数据。

ref响应式数据:users数据是以ref响应式数据声明的一组数据，是一个数组，ref是一种声明响应式数据的组合式API（后续会为大家详细介绍）,这种数据的使用方式是 users.value方式进行使用。

我们在后面声明了一个定时器来添加一条数据，看看有什么效果，使用users.value = [...users.value,'懒羊羊']的方式添加数据。(…users.value是一种解构语法)

可以看到，两秒后，页面就出现了那一条新的数据。

响应式数据:Vue 中的响应式数据就是当数据发生变化时，相关的界面（视图）会自动更新以反映这些变化的机制。Vue 实现了一种数据双向绑定的系统，使得视图和数据之间的关联更加紧密和自动化。

那么，我们子组件又如何去获取父组件传过来的参数呢？

defineProps API:在Vue 3中，defineProps 函数是用于在函数式组件中声明和获取 props 的工具。所以我们可以在子组件中导入defineProps 函数，通过 const {users} = defineProps(['users'])过解构赋值来获取users。也就是数据，

这种写法是 Vue 3 Composition API 中的语法，用于在函数式组件中声明和获取 props。defineProps 函数返回一个包含组件 props 的响应式对象，然后通过解构赋值来获取特定的 prop。这样我们就拿到了父组件传过来的数据。

拿到数据后，我们就可以使用大肥羊村:{{ users }}将数据装载到页面上了。

最后

到了这里，我们今天的基础部分也就讲完了！当然，父子组件之间的知识点不止这么一点，今天我们先了解一下概念！下面一篇，我将为大家详细梳理实现 父子组件通信 以及 Element-plus框架的使用

那么，我们今天就到这啦！

个人Github：一个修远君的库 (github.com)

参考：vue3组件基础(官方文档)

原文链接：https://juejin.cn/post/7321924572055060514 作者：Aidan路修远i