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

组件封装:

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)

相关推荐
Codigger官方2 小时前
Linux 基金会牵头成立 React 基金会:前端开源生态迎来里程碑式变革
linux·前端·react.js
90后的晨仔2 小时前
🌟 Vue3 + Element Plus 表格开发实战:从数据映射到 UI 优化的五大技巧
前端
Javatutouhouduan2 小时前
Java程序员如何深入学习JVM底层原理?
java·jvm·java面试·后端开发·java架构师·java程序员·互联网大厂
爱吃喵的鲤鱼2 小时前
仿mudou——Connection模块(连接管理)
linux·运维·服务器·开发语言·网络·c++
王嘉俊9252 小时前
设计模式--享元模式:优化内存使用的轻量级设计
java·设计模式·享元模式
郝学胜-神的一滴3 小时前
使用Linux的read和write系统函数操作文件
linux·服务器·开发语言·数据库·c++·程序人生·软件工程
ObjectX前端实验室3 小时前
【图形编辑器架构】🧠 Figma 风格智能选择工具实现原理【猜测】
前端·react.js
天桥下的卖艺者3 小时前
R语言基于shiny开发随机森林预测模型交互式 Web 应用程序(应用程序)
前端·随机森林·r语言·shiny
技术钱3 小时前
vue3 两份json数据对比不同的页面给于颜色标识
前端·vue.js·json
2301_803554523 小时前
C++联合体(Union)详解:与结构体的区别、联系与深度解析
java·c++·算法