組件封裝的核心思路是：把可復(fù)用的結(jié)構(gòu)只寫(xiě)一次，把可能發(fā)生變化的部分抽象成組件參數(shù)(props/插槽)。
如果是像純文本，像是一些主標(biāo)題和副標(biāo)題，可以抽象成prop傳入
如果主體內(nèi)容是復(fù)雜的模版，有圖片有列表等，可以抽象成插槽傳入

以上圖為例：
這是抽離出的組件代碼：
componentVue:

<script setup>
import {defineProps} from 'vue'
const props = defineProps({// 主標(biāo)題title: {type:String},// 副標(biāo)題subTitle: {type:String}
})
</script><template><div><div><div><!-- 主標(biāo)題和副標(biāo)題 - props --><h3>{{ title }}<small>{{ subTitle }}</small></h3></div><!-- 主體內(nèi)容區(qū)域 - slot插槽 --><slot></slot></div></div>
</template>

這是兩個(gè)組件的代碼：

  <componentVue title="這是第一個(gè)" subTitle="aaa"><div>這是第一個(gè)aaa</div></componentVue><hr><componentVue title="這是第二個(gè)" subTitle="bbb"><div>這是第二個(gè)bbb</div></componentVue>

純展示類(lèi)組件通用封裝思路總結(jié)
1.搭建純靜態(tài)的部分，不管可變的部分
2.抽象可變的部分為組件參數(shù)
非復(fù)雜的模版抽象成props，復(fù)雜的結(jié)構(gòu)模版抽象為插槽