Noday | 个人博客

摘要：在前端开发过程中，多个页面可能要展示同一个信息组件，如同一个表格、同一个卡片等。而为了避免多次重复的编写同一个组件和为他配置诸多属性这样的麻烦操作，可以将这种组件封装为一个公共组件，以便于我们在任何页面随时引用，element-ui就是将常用的组件和优化后的style样式封装为一个个组件，这样我们就可以很方便的引用。

定义一个组件(按钮为例)

自定义组件的官方命名规则为 PascalCase ，在此我们定义一个组件为MyBtn
在一个文件夹中放入我们想要创建的组件文件，最好有一个单独的文件夹存放这些我们自己注册的公共组件：

在这个文件中我们写下这个组件所需要的所有属性，包括参数、样式、交互等
MyBtn.vue:

<!-- 自行封装按钮组件 -->
 <!-- 交互 -->
<script setup lang="ts">
import { computed } from 'vue';

// 这里定义我们组件所需要的属性
const props = defineProps<{
    type:string    // 接收一个字符串来决定按钮的类型
}>()
// 根据接收到的属性，我们来决定按钮的颜色
// 在此声明对象中的数据类型，避免后续计算属性时ts的报错
const btnColors : Record<string,string> = {
    primary:"#409EFF",
    success:"#67C23A",
    warning:"#E6A23C",
    danger:"#F56C6C"
}
// 计算按钮属性
const btnColor = computed(() => btnColors[props.type])
</script> 
<!-- 组件主体 -->
 <template>
     <button :style="{backgroundColor : btnColor}">
        <!-- 插槽允许渲染组件的文本 -->
        <slot></slot>
    </button>
 </template>
<!-- 样式 -->
 <style scoped>
 button{
    color: white;
 }
</style>

引入组件

这样在主页面我们就可以引入我们注册的组件，并向其中传入一些属性
App.vue:

<script setup lang="ts">
import MyBtn from './components/MyBtn.vue';
</script>

<template>
<!-- 上传文件按钮 -->
 <MyBtn type="primary">基本类型</MyBtn>
 <MyBtn type="success">成功类型</MyBtn>
 <MyBtn type="warning">警告类型</MyBtn>
 <MyBtn type="danger">危险类型</MyBtn>
</template>

这样我们在页面中就可以看到四个不同类型的按钮了：