vue 高阶组件必备知识$attrs，inheritAttrs，$listenters详解

pencil-690050_1920.jpg

1，inheritAttrs介绍

vue默认情况下，父组件是可以直接给子组件的根元素添加class和style的，但是有时候我们可能需要在父组件上给子组件添加一些特性绑定(attribute bindings)(我的理解是自定义属性和一些原生属性)到子组件的根元素上，inheritAttrs就是用来控制子组件根元素上是否允许添加父组件在子组件上定义的特性属性，因为inheritAttrs默认为true，所以我们在父组件中给子组件添加所有特性绑定，都能绑定到根元素，例如下面

渲染后的dom节点：

 

    good
  

把inheritAttrs设为false后，
渲染后的dom节点：

 

    good
  

可以得出上述的结论，inheritAttrs是用来控制子组件根元素上是否允许添加父组件在子组件上定义的特性属性。
注意：

inheritAttrs是用来控制父组件中传递的特性属性，class和style不是特性属性，不能用inheritAttrs来控制。

2，$attrs介绍

我们可以把父作用域中传递的所有属性看作一个大的对象obj，而$attrs会继承obj中的一部分属性，这一部分属性的key不能为class，和style，也不能是当前组件声明的props值，并且父组件为v-model的话，也是不能继承指令封装的value值的，若当前组件无props设置，$attrs则继承除class和style的所有属性。
通常我们给已封装的组件进行中间处理的时候使用，例如element-ui的el-input，我们需要把父组件中的传递的props直接给子组件的子组件的时候，我们就可以用到$attrs，例如：
父组件为：

子组件为：

  
export default {
  props: {limit: Number}
}

根据上面所说，去掉class，去掉指定的value，去掉子组件props声明的limit，那时我们此的$attrs是：

{
  count: '234'
}

3，$listenters介绍

我们对ui框架中的组件进行再封装的时候，例如element-ui中的组件el-input，我们把他封装到我们自己的组件内部。
例如self-input组件如下，

我们需要把el-input组件上自定义的事件传递进去，那么就要用到$listenters。

官网的描述：

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

很容易理解，.native是给子组件根元素添加事件，自然不是用来传给子组件上的子组件或元素。而我们在父组件上给子组件绑定的所有事件，都会放入$listeners中，我们可以在子组件中手动过滤修改后传给子组件中的子组件或者元素上，也可以用v-on="$listeners"，直接全部传给子组件或者元素上。
用法也相当简单，例如：
父组件：

子组件：

由于父组件传入的是一个change事件和两个input事件，那我们打印的this.$listeners是

{
  change: fn,
  input: [fn, fn]
}

下面是一个关于限制小数点的完整demo，感兴趣的可以了解一下