组件封装思路

news/2024/10/31 23:54:10/

组件封装的核心思路是:把可复用的结构只写一次,把可能发生变化的部分抽象成组件参数(props/插槽)。
如果是像纯文本,像是一些主标题和副标题,可以抽象成prop传入
如果主体内容是复杂的模版,有图片有列表等,可以抽象成插槽传入

以上图为例:
这是抽离出的组件代码:
componentVue:

javascript"><script setup>
import {defineProps} from 'vue'
const props = defineProps({// 主标题title: {type:String},// 副标题subTitle: {type:String}
})
</script><template><div><div><div><!-- 主标题和副标题 - props --><h3>{{ title }}<small>{{ subTitle }}</small></h3></div><!-- 主体内容区域 - slot插槽 --><slot></slot></div></div>
</template>

这是两个组件的代码:

javascript">  <componentVue title="这是第一个" subTitle="aaa"><div>这是第一个aaa</div></componentVue><hr><componentVue title="这是第二个" subTitle="bbb"><div>这是第二个bbb</div></componentVue>

纯展示类组件通用封装思路总结
1.搭建纯静态的部分,不管可变的部分
2.抽象可变的部分为组件参数
非复杂的模版抽象成props,复杂的结构模版抽象为插槽


http://www.ppmy.cn/news/1543437.html

相关文章

什么是ksqlDB?流处理世界里的新范式

在大数据技术快速迭代的今天,我们见证了数据处理范式的不断演进。从批处理到流处理,从复杂的编程框架到声明式API,技术在不断简化与进化。而ksqlDB的出现,为我们带来了一个全新的视角 - 它不仅仅是一个流处理引擎,更是重新定义了我们与实时数据交互的方式。 让我们重新认识流处…

C++刷怪笼(9)继承

目录 1.前言 2.正文 2.1继承的概念和定义 2.1.1继承的概念 2.1.2继承的定义 ​编辑 2.1.3继承类模板 2.2基类和派生类间的转换 2.3继承中的作用域 2.3.1隐藏规则 2.4派⽣类的默认成员函数 2.4.1个常⻅默认成员函数 2.4.2实现⼀个不能被继承的类 2.5继承与友元 2.…

深入探索电能消耗数据:基于机器学习的分析与洞察

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

AI问答:Windows快捷键

Windows快捷键是指在Windows操作系统下&#xff0c;操作电脑的键盘快捷方式&#xff0c;可以极大地提高用户的操作效率。以下是一些常见的Windows快捷键及其功能&#xff1a; 一、基础快捷键 序号快捷键解释1F1帮助。在大多数应用程序中&#xff0c;按下F1键可以打开帮助文档…

【Linux】Redis 部署

1、卸载 # 查看 Redis 是否还在运行 [appuserlocalhost redis]$ ps -ef|grep redis appuser 135694 125912 0 14:24 pts/1 00:00:00 ./bin/redis-server *:6379 appuser 135731 125912 0 14:24 pts/1 00:00:00 grep --colorauto redis# 停止 Redis [appuserlocalho…

Centos7.9安装MySQL(二进制)

安装包 https://downloads.mysql.com/archives/community/ mysql-8.0.39-linux-glibc2.17-x86_64.tar.xz 1.卸载MariaDB 查看 rpm -qa|grep mariadb卸载 可能名称不一样&#xff0c;记得替换 rpm -e --nodeps mariadb-libs-5.5.68-1.el7.x86_64rpm -qa|grep mariadb 执行…

MySQL MHA 的部署

MySQL高可用方案 MHA 什么是 MHA MHA&#xff08;MasterHigh Availability&#xff09;是一种经典的高可用架构&#xff0c;专门用于在主从复制环境中实现自动故障切换和最小化数据丢失。 MHA 作为 MySQL 主从复制环境下的高可用解决方案&#xff0c;具有自动化、低成本和稳定…

【Leetcode】单调栈

单调栈 单调栈是一种高效的栈结构&#xff0c;常用来解决数组中元素顺序相关的问题&#xff0c;如“下一个更大元素”等。其核心思想是通过维护栈内元素的单调性&#xff0c;并记录元素的间顺序关系&#xff0c;以减少不必要的比较操作。通常情况下&#xff0c;由于每个元素入…