二次封装组件库

如何属性穿透？

当在进行二次封装组件库的时候,需要属性穿透,也就是说当传入属性的时候会自动穿透到UI组件. 这里拿element为例子：

1. 处理v-model,如果在绑定v-model需要穿透,需要考虑数据源单向性
2. 处理slot,需要在使用的时候含有相同的slot
3. 处理ref,ref也需要穿透 在使用的ref绑定的时候可以绑定到UI组件上面

<!-- ./components/MyInput.vue -->
<template>
  <el-input v-bind="attrs" v-model="model">
    <template v-for="(_, name) in slots" #[name]="data">
      <component :is="_" v-bind="data || {}" />
    </template>
  </el-input>
</template>

<script setup lang="ts">
import { useAttrs, useSlots, defineModel } from "vue";
const attrs = useAttrs();
const model = defineModel();
const slots = useSlots();
</script>

useAttrs

useAttrs是vue提供的一个hook,可以获取到当前组件的attrs,attrs除了props、emits以外的值 defineModel是vue提供的一个hook,可以定义一个响应式数据,并且可以双向绑定

源码

参考

attrsdefinemodel