5. 组件详解

一、前言

vue语法的内容,通过前面两章的学习已经差不多了,所以本章开始学习vue中另一个非常重要的部分:组件。

因为前面章节主要vue语法特性特性的缘故,为了减轻大家的认知负担、我都尽可能的只在一个叫做App.vue文件中完成的。

而这种以.vue结尾的文件,在vue中被称为组件,并且这个App.vue是整个vue项目的根组件,

之所以App.vue为根组件,是因为我们的入口js文件中用的它来创建整个vue实例:

image-20240121163712892

虽然你也可以改为其它的,但一般情况下都是直接默认即可。

二、组件基础

这部分内容你也可以对照官方文档查看组件基础,正如官方所说,组件的基本作用其实就是复用。

比如下图这个由官网提供的图片示例:

image-20231002154159138

左边就是一个基本的页面样式,并抽象出了右边的代码结构。

Root便代表了我们整个页面,并且Root可以由三部分组成:HeaderMainAside

然后这三个又可以继续由其它部分组成,成为一种树形的嵌套结构。

vue组件的基本思想就是,能不能将这结构上的每一个结点都抽象成为一个组件

比如这里的Header,即页头嘛,你可能很多页面都会用到,甚至其它项目也能用到。

如果能把它抽象成为一个组件,那么其它任何地方只要想用,直接将这个组件复制、引入进项目中即可。

这就完成了代码的复用!

而且最重要的是,vue中一个组件包含了htmljscss这三个部分,所以即使你引入到其它项目中,也是可以直接使用的,而无需额外调整。

而传统的复用方式很多都是三种代码分开存放,这就导致即使你引入,想要复用大多数时候也都还需要继续调整才行。

理解了组件的基本来历与用途,下面我们就来看看怎么用。

正如前面所说,一个组件就是一个.vue结尾的文件,官方常称其为“单文件组件”(SFCSingle File Component)。

一般我们都会将组件创建在这个components文件夹下:

image-20240121203851138

然后在这个组件中写好三个基本的标签即可。

紧接着我们就可以在这个组件中写一些比较通用的功能了,比如可以写一个好看点的按钮组件:

<template>
    <div class="Button">
        <button @click="btn_click">按钮组件</button>
    </div>
</template>

<script setup>

function btn_click() {
    window.alert('你点击了按钮');
}
</script>

<style scoped>
.Button button {
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.Button button:hover {
    background-color: #ccc;
}
</style>

这个组件很简单,就是封装了一个按钮而已,并且所有与按钮相关的东西:htmlcssjs代码都在这个文件中了。

然后,如果我们想要使用这个组件,那就在你想要用的地方,将它导入使用即可:

image-20240121204543201

比如上面,我们就是在根组件中导入了这个组件,并使用。

导入的方式一般都是通过文件名进行导入的,比如这里我的文件名为Hello.vue,所以导入名就为Hello,而导入的路径,这里写的是相对路径。

.代表当前文件所在路径,因为components文件夹与App.vue文件在同一层目录下。

而使用的方式,就和正常标签一样用就行了,是不是很简单好用?

按钮比较简单,大家自己实现一个可能也并不费劲,可如果是一个选日期的组件呢?

image-20231002181024719

这种复杂的组件,如果你没有一定的前端功底,恐怕是很难写出来的,即使能写,也得费很大劲了。

而别人现在就是用vue组件的方式将其封装了起来,我们如果想要用,直接将其引入即可!

目前前端用的比较多的是Element界面库,它基本涵盖了所有前端开发的库,除却需要高度自定义的组件的公司会自己研发一套外,很多公司都使用的这套界面库。。

三、注册

正常来说,我们如果想要使用一个组件,那么是需要先进行注册的。

比如前面的Hello组件,以前可能需要像下面这样写才能用:

image-20240121204823911

即在没有setup属性的script中,你需要自己将这个组件通过一个叫做components属性的对象注册一下,才能被使用。

只不过由于官方既然已经给出了setup的语法糖,那么也没必要写这些东西了,看着就很麻烦:

image-20240121204958532

这是局部注册的方式,也就是你在什么时候需要、在哪个组件里面需要,就在这个组件里面去注册使用即可。

这也是我们用的最多的方式,但官方也提供了一个叫做全局注册的方式:

作者:余识
全部文章:0
会员文章:0
总阅读量:0
c/c++pythonrustJavaScriptwindowslinux