[vue]vue组件开发基础-组件基础,父子组件基础

vue组件式开发基础

基本介绍

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

[vue]vue组件开发基础-组件基础,父子组件基础

这就如同我们嵌套的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>

[vue]vue组件开发基础-组件基础,父子组件基础

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

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

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

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

[vue]vue组件开发基础-组件基础,父子组件基础

  • 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>

父子组件关系基础

[vue]vue组件开发基础-组件基础,父子组件基础

我们在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,父组件可以向子组件传递数据,使得子组件能够接收并使用这些数据。

[vue]vue组件开发基础-组件基础,父子组件基础

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

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

[vue]vue组件开发基础-组件基础,父子组件基础

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

响应式数据: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

(0)
上一篇 2024年1月10日 上午10:37
下一篇 2024年1月10日 上午10:48

相关推荐

发表回复

登录后才能评论