嘿，朋友，今天咱们来聊聊 Vue3 组件的二次封装，这事儿吧，说简单也简单，说复杂也复杂。为啥？因为你想啊，你要是封装得不好，那以后用起来就是个坑，动不动就出问题，改起来还麻烦。所以今天咱就来整点实在的，教你咋样优雅地把一个组件给“拿”过来再“加工”一下让它geng符合我们项目的需求。

为啥要搞组件二次封装？

害，这事儿吧，其实hen多人dou会遇到。你想想，项目里是不是经常有一些组件用得特别频繁？比如输入框、表格、弹窗这些。但有时候原生组件又不完全满足我们的需求，比如默认值不对、样式要改、功Neng要加点，这时候就得自己动手丰衣足食了。

那咋办？直接改源码？别闹了改了就不好维护了。所以咱们得搞个“中间层”——也就是二次封装，把原组件包一层，再加点自己的逻辑，这样既保留了原功Neng，又加上了我们自己的定制化内容，简直是一举两得。

你懂的，组件库比如 Element Plus、Naive UI 这些，虽然功Neng强大，但总有些地方不顺手。比如你想加点默认值、改点样式、或者加点自己的逻辑，这时候二次封装就派上用场了。

封装组件的常见问题

封装组件的时候，Zui头疼的几个问题：

属性怎么传？

插槽怎么透传？

方法怎么暴露？

样式怎么覆盖？

别急，咱们一个一个来。

属性透传怎么Zuo？

这个其实hen简单，用 v-bind="$attrs" 就行了。不过你得注意，$attrs 是 Vue 自动收集的非 props 属性，比如 class、style、事件这些。你只要在封装组件里用 v-bind="$attrs"，它就会自动把这些属性传给内部组件。

但！是！你要是想加点自己的 props，比如加个默认值，或者改个默认行为，那你就得用 mergeProps 这个 API，把 $attrs 和你自定义的 props 合并一下再传给子组件。

比如你这样写：

这样就Neng把父组件传来的属性和你自定义的 props 一起传给 el-input 了。是不是hen香？

插槽透传怎么Zuo？

这个就geng简单了直接用 v-for 遍历 $slots 就行了。比如这样写：

一句话，插槽就传过去了多省事儿！

你懂的，$slots 是个对象，里面是插槽名和插槽内容的映射。你只要遍历它，然后用 slot 标签透传出去，就完事了。这个方法适用于任何组件，不管它有多少个插槽，douNeng无脑用。

方法怎么暴露？

这个就有点讲究了。你得用 defineExpose 把子组件的方法暴露出来。比如你封装了一个 YiInput 组件，然后在父组件里用 ref 拿到它，再调用子组件的方法，比如 focus，这就叫方法暴露。

但问题是你封装的组件里怎么把子组件的方法暴露出去？

这时候你Ke以用 defineExpose，比如这样：

defineExpose({
  focus:  => rawRef.value?.focus
})

或者你也Ke以用 Proxy 代理的方式，把子组件的 ref 暴露出去，这样父组件就Neng调用子组件的方法了。比如：

defineExpose(
  new Proxy({}, {
    get:  => rawRef.value?.,
    has:  => key in 
  })
)

这样父组件就Neng直接调用子组件的方法了比如 inputRef.value.focus，是不是hen爽？

样式覆盖怎么Zuo？

这个就kan你项目里用的是什么 CSS 预处理器了。比如你用的是 SCSS，那你Ke以这样写：

.e-input {
  min-width: 190px;
  :deep {
    background: red;
  }
}

这样就Neng覆盖子组件的样式了。当然你也Ke以用 !important，但不推荐，容易出问题。

类型提示怎么搞？

这个是 TypeScript 的事儿。你要是用的是 Vue3 + TS，那你就得注意类型提示的问题了。比如你封装的是 Element Plus 的 Input 组件，那你Ke以这样写：

import type { InputProps as ElInputProps } from 'element-plus'
const props = withDefaults, {
  clearable: true
})

这样你就Neng拿到完整的类型提示了写代码的时候就不会出错了。

还有个坑是插槽的类型提示。你得这样写：

type InputSlots = InstanceType
defineSlots

这样你就Neng在模板里用 $slots 的时候有类型提示了写得geng安心。

一下

咱就是说封装组件这事儿吧，其实不难，但得注意细节。比如属性透传、插槽透传、方法暴露、样式覆盖、类型提示，这些dou是你得考虑的点。你要是Neng搞定这些，那你封装的组件就Neng在项目里飞起来。

说实话，封装组件不是为了炫技，而是为了提高开发效率，减少重复代码。你要是Neng把这些细节dou处理好，那你的组件库就Neng越Zuo越强，项目维护起来也轻松。

害，说了这么多，其实核心就一句话：封装组件不是为了封装而封装，而是为了复用和 。你要是Neng理解这个，那你就Yi经走在了高手的路上了。

---