$attrs 与 $listeners

本文转自

学会使用listeners，二次包装组件就靠它了

前几天产品经理给我甩过来一份管理系统的设计原型，我打开看了看，虽然内心是拒绝的，但是为了活着，还是要做的。小编看了看原型，发现系统中的大部分弹框右下角都是确定和取消两个按钮。如果使用element-ui提供的Dialog，那么每一个弹框都要手动加按钮，不但代码量增多，而且后面如果按钮UI，需求发生变化，改动量也比较大。

image.png

如果可以将Dialog进行二次封装，将按钮封装到组件内部，就可以不用重复去写了。说干就干。

定义基本弹框代码

通过上面的代码，我们已经将按钮封装到组件内部了，效果如下图所示：

这是一段内容

image.png

但上面的代码存在一个问题，无法将Dialog自身的属性和事件暴露到外部（虽然可以通过props及attrs与$listeners

---

使用listeners

attrs属性内（class与style除外，他们会挂载到组件最外层元素上）。并可通过v-bind="$attrs"传入到内部组件中

listeners获取到。并可通过v-on="$listeners"传入到内部组件中。

修改弹框代码

  这是一段内容

对于props来代替,实现代码如下

但上面的代码存在一定的缺陷，有些组件存在非props的属性，比如对于一些封装的表单组件，我们可能需要给组件传入原生属性，但实际原生属性并没有在组件的props上面定义，这时候，如果通过上面的方式去包装组件，那么这些原生组件将无法传递到内部组件里面(感谢@陌上兮月的提醒)