11. vue组件实战

一、前言

关于vue的知识通过前面的章节我们已经学的差不多了，所以本章将带大家尝试使用vue开发几个常用的控件，深刻体会一下vue提供的便利所在。

注意，由于我个人喜欢使用TypeScript与less语法，所以我在vue项目中会直接使用这两者，不会安装、使用这两者的可以参考前面一篇文章。

包括项目建立等基础性内容，这里也不再重复赘述了。

二、按钮组件封装

对于“按钮”这种非常通用的组件来说，一般我们都会将其放在components文件夹下：

由于实现一个基本的按钮过于简单，所以我这里直接将代码完成如上图。

注意2号位置，使用的是vue的插槽知识，忘了的可以到组件详解回顾。

至于3号样式中的内容就属于css的知识了，用于设置该按钮组件的各种基本样式，不会的自己多敲一敲就好了。

注意less中这里使用的&符号，代表的是父标签，比如这里&:hover等价于.Mbutton:hover

完成代码如下：

<script setup lang="ts">
</script>

<template>
    <button class="MButton">
        <slot></slot>
    </button>
</template>

<style scoped lang="less">
.MButton {
    height: 25px;
    background-color: #ecf5ff;
    color: #48a2ff;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    border: solid 1px #a0cfff;

    &:hover {
        background-color: #409eff;
        color: #e5f2ff;
    }
}
</style>

使用方法如下：

使用vue组件，其实和使用普通的标签没有太大的区别，正如上图所示：

1. 首先你需要将组件导入到要使用的页面中
2. 然后将导入的该组件直接写在template标签中即可
3. 如果想要绑定基本事件，那就直接绑定即可，这里涉及到前面提到过的“透传”概念。

至于写在标签中的字符串“测试按钮”，也会通过插槽传入其内部slot标签位置。

注意，这里标签的外围之所以会出现一个空隙，是因为其默认行为导致的，你可以在assets/main.css这个全局样式文件中添加以下代码将其取消掉：