总结 - 组件通用封装思路(组件封装)

组件封装:

1. 不变;

2. 变:①prop ②slot插槽

详细总结在文末。


问题:结构相似,内容不同 --》 可以用组件封装 实现复用结构的效果

思想: 把可复用的结构只写一次,把可能发生变化的部分抽象成组件参数(props/插槽

步骤:

  1. 搭建纯静态部分(不变的部分)

  2. 抽象可变的部分

  • 纯文本/纯展示 -> props
  • 复杂模板 -> 插槽

具体实现

封装的组件中:

javascript 复制代码
<!-- 组件封装 -->
<script setup>
// 1. 定义props:defineProps({ 变量:{type:数据类型} }),用于复用 简单数据,如纯js类
defineProps({
    title: {
        type: String
    }
})
</script>

<template>
    <div class="head">
        {{ title }}    
    </div>

    <!-- 插槽,用于复用复杂模板 -->
    <slot></slot>
</template>

在父组件中,导入并调用封装的组件

javascript 复制代码
<script setup>
import HomePanel from './HomePanel.vue'    //导入封装的组件

</script>

<template>
    <!-- 使用封装的组件 -->
    <HomePanel title="新鲜好物">
        ...    <!-- 插槽内容,显示于子组件的内容 -->
    </HomePanel>
</template>

例子1:prop

封装一个组件(结构卡片),纯展示类 -> 抽象为props参数,传什么显示什么

注,:goods=""前面的冒号是动态数据绑定。

vue中的冒号(:) 是 指令v-bind的缩写,用于数据绑定的语法糖,可以将组件的数据绑定到模板中。即,通过在模板中 使用冒号和Vue实例中的数据属性名称,将该数据属性的值动态绑定到对应的HTML元素上。--> 用法为 :数据属性='值'

(本例子中,数据绑定的值是接口数据中的一个数组,再将其渲染到页面中。)

例子2:prop、slot插槽


纯展示类 组件通用封装思路 总结:

  1. 搭建纯静态部分,不管可变部分

  2. 抽象可变的部分为组件参数

非复杂的模板抽象成props,复杂的结构模板抽象成slot插槽

参考:vue组件中的":"、"@"、"."属性 - BAHG - 博客园 (cnblogs.com)

相关推荐
泷羽Sec-静安16 分钟前
Less-1 GET-Error based-Single quotes-String GET-基于错误-单引号-字符串
前端·css·网络·sql·安全·web安全·less
不光头强27 分钟前
IDEA的基本设置和使用
java·ide·intellij-idea
小时前端27 分钟前
虚拟DOM已死?90%内存节省的Vapor模式正在颠覆前端
前端·html
Keepreal49629 分钟前
Web Components简介及如何使用
前端·javascript·html
jump68036 分钟前
TS中 unknown 和 any 的区别
前端
TG_yunshuguoji43 分钟前
亚马逊云渠道商:如何通过配置自动替换构建故障自愈的云架构?
运维·服务器·架构·云计算·aws
无羡仙44 分钟前
AI终于‘看见’网页了!Stagewise让UI修改从‘盲调’变‘指哪打哪
前端
毕设源码-朱学姐1 小时前
【开题答辩全过程】以 产品报价系统为例,包含答辩的问题和答案
java·eclipse
期待着20131 小时前
StarRocks 集群安装部署文档
linux·服务器
无心水1 小时前
深入Java线程池:BlockingQueue实现全景解析与实战指南
java·后端·面试