组件封装:
1. 不变;
2. 变:①prop ②slot插槽
详细总结在文末。
---------------------------------------------------------------------------------------------------
问题:结构相似,内容不同 --》 可以用组件封装 实现复用结构的效果
思想:把可复用的结构只写一次,把可能发生变化的部分抽象成组件参数(props/插槽)
具体实现
封装的组件中:
<!-- 组件封装 -->
<script setup>
// 1. 定义props:defineProps({ 变量:{type:数据类型} }),用于复用 简单数据,如纯js类
defineProps({
title: {
type: String
}
})
</script>
<template>
<div class="head">
{{ title }}
</div>
<!-- 插槽,用于复用复杂模板 -->
<slot></slot>
</template>
在父组件中,导入并调用封装的组件
<script setup>
import HomePanel from './HomePanel.vue' //导入封装的组件
</script>
<template>
<!-- 使用封装的组件 -->
<HomePanel title="新鲜好物">
... <!-- 插槽内容,显示于子组件的内容 -->
</HomePanel>
</template>
例子1:prop
封装一个组件(结构卡片),纯展示类 -> 抽象为props参数,传什么显示什么
(本例子中,数据绑定的值是接口数据中的一个数组,再将其渲染到页面中。)
例子2:prop、slot插槽
--------------------------------------------------------------------------------------------------------------------
参考:vue组件中的“:”、“@”、“.”属性 - BAHG - 博客园 (cnblogs.com)