[Vue]組件——使用.native和$listeners將控件的原生事件綁定到組件

 

1.方法1：.native修飾符

1.1.native修飾符：將原生事件綁定到組件的根元素上

<base-input v-on:focus.native="onFocus"></base-input>

1.2缺點：

如以下根元素實際上是一個 <label> 元素時，原生事件不能被綁定到input事件上：

<label>
  {{ label }}
  <input
    v-bind="$attrs"
    v-bind:value="value"
    v-on:input="$emit('input', $event.target.value)"
  >
</label>

 

2.方法2：$listeners 屬性（它是一個對象，里面包含了作用在這個組件上的所有監聽器。）

 2.1使用 v-on="$listeners" 將所有的事件監聽器指向這個組件的某個特定的子元素。

<template>
  <button
    :disabled="mixin_controlDisable"
    :class="$style.button"
    v-on="$listeners"
  >
  </button>
</template>

2.2對於類似 <input> 的你希望它也可以配合 v-model 工作的組件來說，為這些監聽器創建一個類似下述 listeners 的計算屬性通常是非常有用的：

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign` 將所有的對象合並為一個新對象
      return Object.assign({},
        // 我們從父級添加所有的監聽器
        this.$listeners,
        // 然后我們添加自定義監聽器，
        // 或覆寫一些監聽器的行為
        {
          // 這里確保組件配合 `v-model` 的工作
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  },
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
  `
})

現在 <base-input> 組件是一個完全透明的包裹器了，也就是說它可以完全像一個普通的 <input> 元素一樣使用了：所有跟它相同的特性和監聽器的都可以工作。

<base-input v-on:focus="onFocus"></base-input>