vue 高階組件必備知識$attrs，inheritAttrs，$listenters詳解

1，inheritAttrs介紹

vue默認情況下，父組件是可以直接給子組件的根元素添加class和style的，但是有時候我們可能需要在父組件上給子組件添加一些特性綁定(attribute bindings)(我的理解是自定義屬性和一些原生屬性)到子組件的根元素上，inheritAttrs就是用來控制子組件根元素上是否允許添加父組件在子組件上定義的特性屬性，因爲inheritAttrs默認爲true，所以我們在父組件中給子組件添加所有特性綁定，都能綁定到根元素，例如下面

<template>
<div>
  <base-item class="box" 
      key="1" 
      default-id="1" 
      style="font-size: 14px;">
  </base-item>
</div>
</template>
<script>
export default {
  components: {
    baseItem: {
      inheritAttrs: false,
      template: `
        <div>
          <span>good</span>
        </div>
      `
    }
  }
}
</script>

渲染後的dom節點：

 <div default-id="1" class="box" style="font-size: 14px;">
    <span>good</span>
  </div>

把inheritAttrs設爲false後，
渲染後的dom節點：

 <div class="box" style="font-size: 14px;">
    <span>good</span>
  </div>

可以得出上述的結論，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，例如：
父組件爲：

<self-input class="self-input" 
  :limit="2" 
  v-model="item.count" 
  count="234">
</self-input>

子組件爲：

<el-input
    type="text"
    v-bind="$attrs"
    v-model="defaultValue">
  </el-input>
export default {
  props: {limit: Number}
}

根據上面所說，去掉class，去掉指定的value，去掉子組件props聲明的limit，那時我們此的$attrs是：

{
  count: '234'
}

3，$listenters介紹

我們對ui框架中的組件進行再封裝的時候，例如element-ui中的組件el-input，我們把他封裝到我們自己的組件內部。
例如self-input組件如下，

<div>
  <el-input></el-input>
</div>

我們需要把el-input組件上自定義的事件傳遞進去，那麼就要用到$listenters。

官網的描述：

包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部組件——在創建更高層次的組件時非常有用。

很容易理解，.native是給子組件根元素添加事件，自然不是用來傳給子組件上的子組件或元素。而我們在父組件上給子組件綁定的所有事件，都會放入$listeners中，我們可以在子組件中手動過濾修改後傳給子組件中的子組件或者元素上，也可以用v-on="$listeners"，直接全部傳給子組件或者元素上。
用法也相當簡單，例如：
父組件：

<template>
  <self-input
    @change="changeHandler"
    @input="inputHandler"
    v-model="count">
  </self-input>
</template>
<script>
  export default {
    data () {
      return {count: ''}
    },
    methods: {
      changeHandler () {},
      inputHandler () {}
    }
}
</script>

子組件：

<template>
  <el-input
    v-on="$listeners"
    v-model="defaultValue">
  </el-input>
</template>
<script>
export default {
  data () {
    return {
      defaultValue: ''
    }
  },
  props: {
    value: [String, Number] // value值
  },
  mounted () {
    console.log(this.$listeners)
  }
}
</script>

由於父組件傳入的是一個change事件和兩個input事件，那我們打印的this.$listeners是

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

下面是一個關於限制小數點的完整demo，感興趣的可以瞭解一下

<template>
  <el-input ref="input"
    type="text"
    v-bind="$attrs"
    v-on="$listeners"
    @input.native="inputHandle"
    v-model="defaultValue">
  </el-input>
</template>
<script>
/** 示例 當前組件主要目的是實時控制輸入框小數點右側字符長度
 * <self-input
 * :minLimit="0.21" :maxLimit="100.22"
 * @input="inputHandle"
 * :limit="2" v-model="aaa"></self-input>
 * limit 小數點有幾位
 * 解釋
 * v-model的作用是將value和事件傳遞給子組件el-input，並且作爲中間變量來傳遞value值
 * inputHandle 主要是對輸入的內容進行實時校驗
 */
export default {
  data () {
    return {
      defaultValue: '' // 作爲中間變量
    }
  },
  inheritAttrs: false, // 此處設置根元素禁用繼承特性（只繼承class屬性）
  // 當inheritAttrs爲true的話，只繼承除class style props之外的屬性
  props: {
    limit: { // 小數點保留位數
      type: Number,
      required: true
    }, // 小數點長度
    maxLimit: Number, // 最大數值
    minLimit: Number, // 最小數值
    value: [String, Number] // value值
  },
  watch: {
    value: {
      handler (val) {
        this.defaultValue = val
      },
      immediate: true // 給組件設置默認值
    }
  },
  methods: {
    inputHandle (e) {
      let val = e.target.value || ''
      if (!val) {
        val = this.defaultValue
      }
      this.formatNumber(val)
    },
    formatNumber (val) {
      val = String(val).replace(/e/, '') // 替換e爲空
      if (/\./.test(val)) { // 控制小數點位數
        // 替換掉小數點後面的點和非數字
        let str = val.split('.')[1].replace(/\./g, '').replace(/\D/g, '')
        val = val.split('.')[0] + '.' + str.substr(0, this.limit)
      } else {
        val = String(val).replace(/\D/g, '')
      }
      // 判斷是否超過最大值
      if (this.maxLimit && Number(val) >= this.maxLimit) {
        val = String(this.maxLimit)
      }
      // 判斷是否小於最小值 不等於0的目的是爲了可以刪除所有
      if (this.minLimit && Number(val) !== 0 && Number(val) <= this.minLimit) {
        val = String(this.minLimit)
      }
      this.defaultValue = val
      this.$refs.input.currentValue = val
      this.$emit('input', val)
    }
  },
  mounted () {
    console.log(this.$listeners)
  }
}
</script>
<style lang="scss" scoped>
</style>