深入了解二次封装组件的原理

在实际业务需求中，我们经常需要对第三方组件库进行业务封装，比如对el-card进行封装。首先我们正常进行插槽使用：

<el-card class="box-card"> 
    <template v-slot:header>
        <span>卡片名称</span>  
    </template> 
</el-card>

那么我们进行二次封装应该是要达到这个效果的，所以大概就可以写成这样：

<el-card class="box-card"> 
    <template #header>
        <span>{{titile}}</span> 
    </template> 
</el-card>

如果除了这个header，还有其它内容呢？比如card的内容，通用的就来了：

<el-card class="box-card"> 
   <template #[slotName] v-for="(slot, slotName) in $slots" > 
       <slot :name="slotName" /> 
   </template>
</el-card>

而对于作用于插槽，我们知道，作用于插槽的数据流方向是子组件流向父组件的，就是说父组件可以访问子组件中v-bind绑定的属性。 通用的是：

<template #[slotName]="slotProps" v-for="(slot, slotName) in $scopedSlots">
  <slot :name="slotName" v-bind="slotProps" />
</template>

这里的slotProps指向的是第三方组件库中的那些属性。