网站建设知识点,腾讯云快速建站,企业网站 备案,wordpress 怎么改密码忘记组件封装的核心思路是#xff1a;把可复用的结构只写一次#xff0c;把可能发生变化的部分抽象成组件参数(props/插槽)。 如果是像纯文本#xff0c;像是一些主标题和副标题#xff0c;可以抽象成prop传入 如果主体内容是复杂的模版#xff0c;有图片有列表等#xff0c;…组件封装的核心思路是把可复用的结构只写一次把可能发生变化的部分抽象成组件参数(props/插槽)。 如果是像纯文本像是一些主标题和副标题可以抽象成prop传入 如果主体内容是复杂的模版有图片有列表等可以抽象成插槽传入 以上图为例 这是抽离出的组件代码 componentVue:
script setup
import {defineProps} from vue
const props defineProps({// 主标题title: {type:String},// 副标题subTitle: {type:String}
})
/scripttemplatedivdivdiv!-- 主标题和副标题 - props --h3{{ title }}small{{ subTitle }}/small/h3/div!-- 主体内容区域 - slot插槽 --slot/slot/div/div
/template
这是两个组件的代码 componentVue title这是第一个 subTitleaaadiv这是第一个aaa/div/componentVuehrcomponentVue title这是第二个 subTitlebbbdiv这是第二个bbb/div/componentVue
纯展示类组件通用封装思路总结 1.搭建纯静态的部分不管可变的部分 2.抽象可变的部分为组件参数 非复杂的模版抽象成props复杂的结构模版抽象为插槽
