当我们对组件二次封装时我们在封装什么

前言

经常的，我们在日常工作中，会使用第三方UI组件库，比如：element-ui、vant-ui、iview、ant-design等等。不管是为了业务考虑还是单纯的为了提高效率，我们会把一些经常用到的组件抽离、封装成公共组件，这样方便我们在不同的地方使用这个组件，减少重复代码的编写。

我们把对于第三方组件库的封装称为组件的二次封装，那么这带来有个思考，当我们在二次封装时，我们在封装什么？

二次封装时，我们需要遵循什么？

在 vue 组件封装时，我们需要注意的主要是三部分：prop、event、slot。

• prop：表示组件接收的参数，最好用对象的写法，这样可以针对每个属性设置类型、默认值或自定义校验属性的值，此外还可以通过type、validator等方式对输入进行验证；
• event：子组件向父组件传递消息的重要途径；
• slot：可以给组件动态插入一些内容或组件，是实现高阶组件的重要途径；当需要多个插槽时，可以使用具名slot。

你必须要知道的 $attrs 和 $listeners

我们多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，这就有点大材小用了。所以就有了 $attrs / $listeners ，通常配合 inheritAttrs 一起使用。

感觉还是挺晦涩难懂的，简单的说就是 inheritAttrs：true 继承除props之外的所有属性；inheritAttrs：false 只继承class属性。

• $attrs: 包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。当一个组件没有声明任何 props 时，它包含所有父作用域的绑定 (class 和 style 除外)。* $listeners: 包含了父作用域中的 (不含 .native 修饰符) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。它是一个对象，里面包含了作用在这个组件上的所有事件监听器，相当于子组件继承了父组件的事件。attrs和attrs 和 attrs和listeners 在做组件二次封装时非常有用。

如何使用 $attrs 和 $listeners

上面说了那么多，我们来看一个例子：

在使用 el-input-number时，当我们给他赋默认值 null 或者空字符串 "" 时，会显示 0 ，而这在我们一些业务场景里并不是很友好，并且值是居中显示的，那么现在我们想要做的改造是：值居左显示，没有默认值显示0的问题，且默认不展示控制按钮

• 控制按钮默认不显示：controls 设置成 false
• 居左显示：通过样式控制
• 默认值显示0的问题：通过 computed 计算不为 number 类型时，赋值为 undefined 解决<